Cannot play audio URLs not ending with a file extension

sedubois commented 3 months ago

Current Behavior:

When using a src URL which does not end with a filetype extension, playback does not start when clicking play. No errors are reported in the JS console.

The error persists if type when is provided alongside src.

Expected Behavior:

The play button should appear and the audio should be playable.

Steps To Reproduce:

Put two copies of any same sample mp3 file accessible on a local server at the following URLs: http://localhost:3000/sample.mp3 and http://localhost:3000/sample

Render the following Vidstack web component.

<media-player src="http://localhost:3000/sample.mp3" type="audio/mp3">
<media-provider></media-provider>
<media-controls>
<media-controls-group>
  <media-play-button>
    <media-icon type="play"></media-icon>
  </media-play-button>
</media-controls-group>
</media-controls>
</media-player>

Click the play button: OK, audio playback starts when clicking the play button.
In a separate browser tab, visit http://localhost:3000/sample to double-check that the mp3 file without an extension is playable. OK, the playback starts.
Change the src URL to http://localhost:3000/sample and reload the vidstack player page: playback does not start when clicking the play button.

Environment:

Vidstack 1.11.24
Framework: web components
Meta Framework: Rails 7.0
Node: 21.7.2
Device: macbook M2
OS: macOS@14.5
Browser: Firefox@127.0.2 (64 bits)

Anything else?

I observed this issue initially when trying to play S3 files made available through CloudFront URLs, but for the sake of simplicity, the above example is with local files. The issue appears in both cases, as soon as I try to play an mp3 file whose URL does not end with .mp3.

mihar-22 commented 3 months ago

Thanks for the thorough issue description. It's been answered on Discord.

sedubois commented 3 months ago

Thanks! As discussed on Discord it's fixed by switching to type="audio/mpeg" instead of type="audio/mp3" and moving the attributes to a <source /> tag embedded in <media-provider>:

<media-player>
  <media-provider>
    <source
      src="http://localhost:3000/sample"
      type="audio/mpeg"
      />
  </media-provider>
  <media-controls>
    <media-controls-group>
      <media-play-button>
        <media-icon type="play"></media-icon>
      </media-play-button>
    </media-controls-group>
  </media-controls>
</media-player>

vidstack / player