0

TL;DR bolded question at the bottom

So I've spent the better part of the day trying to figure out if I can link a streaming URL to the HTML5 Audio element, and I couldn't tell from the spec. This line from the spec (when describing the audio element was interesting:

src — Address of the resource

And so it doesn't look like it has to be a static path. However, everything else I've read from SO answers, to different parts of the spec, it was inconclusive, so I just decided to try it. I grabbed different streams off this website: https://lrn.fm/listen/online/ and decided to just stick things in the audio src. Here is my code for the audio element:

<audio src='https://streams.lrn.fm:8110' controls></audio>

And this is the error message I get in the JS console in Chrome 71 on Mac Mojave (running a test webserver on XAMPP with the default configs pretty much):

GET https://streams.lrn.fm:8110/ net::ERR_CONNECTION_CLOSED

This is the error message I get when I replace the above src with this src (https://s2.voscast.com:7392):

GET https://s2.voscast.com:7392/ net::ERR_CONNECTION_RESET

So it doesn't look like the audio element accepts a streaming URL as a source. Is this true, or am I doing something wrong?

To me, it looks like the browser won't accept anything over a non-standard port when GETting over HTTPS. Is that way off base? Pretty much, this is the question:

Does the HTML5 Audio element accept a remote server address in the src attribute?

Adam McGurk
  • 186
  • 1
  • 19
  • 54

3 Answers3

1

you have just made a simple miskate.

Your code

  <audio src='https://streams.lrn.fm:8110' controls></audio>

Updated code

<audio controls>
          <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
          <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>

You just need to put the right url which contains the valid extension. like - .mp3, .ogg and type of the media.

Hope this helpful.

Code Snippet here.

  <audio controls>
              <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
              <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
            </audio>
Ana Andrew
  • 156
  • 1
  • 10
  • The funniest thing is that for me, it works only like this: ``````. I'm using signed urls and using other formats, the source link get broke in many lines by browser, so it mess the whole tag. – Éder Rocha Aug 03 '22 at 17:57
0

On a quick look from the HTML issue:

There is nothing in the spec that would block this, although I think implementations are free to reject connections, especially if they don't handle the given media type.

chaals
  • 1
0

You can use streaming URls in the audio element. See:

I was unable to access the specific streams you mentioned. I suspect the owner of them has applied restrictions so they can only be loaded from their own pages. Are you able to load those streams directly in your browser?

Try running your own streaming server - or find a free source of streaming audio.

Terence Eden
  • 14,034
  • 3
  • 48
  • 89