Audio html5 tag


(Martin Broerse) #1

I just added an audio tag like this to link a podcast.

but is does not show up. How should a Podcast or other audio file be linked? It is correct in the preview.


(Jeff Atwood) #2

You are over thinking this. :wink:

Just paste the url on a line by itself.


(Martin Broerse) #3

I past in:

http://www.streamlook.com/v1/getmp3/e7f2fd265203080d4d5fca154aca9047/p0hFFMZX/ITBende/ITbende_0214_05-07-13.mp3

but it does not show the <audio> </audio> player. It shows in the preview in IE10 if you use the audio tag.

I insert it like this:

<audio src="http://www.streamlook.com/v1/getmp3/e7f2fd265203080d4d5fca154aca9047/p0hFFMZX/ITBende/ITbende_0214_05-07-13.mp3" controls preload="metadata" autobuffer />


(Jeff Atwood) #4

Probably we should offer some oneboxing strategy for “raw” mp3 (ogg, too? other audio formats compatible with native HTML5 browser playback) links. Pull requests welcome in this area.

SoundCloud and YouTube links do get oneboxed as expected.


(James A. Anderson) #5

If you two aren’t interested I’m willing to submit a PR for this. @broerse ok with you?


(Martin Broerse) #6

I was offline in Åland but this is OK with me.


(James A. Anderson) #7

https://github.com/discourse/discourse/pull/1253


(Martin Broerse) #8

I tryed it on http://try.discourse.org but is still not working.<audio src="http://www.streamlook.com/v1/getmp3/e7f2fd265203080d4d5fca154aca9047/p0hFFMZX/ITBende/ITbende_0214_05-07-13.mp3" controls preload="metadata" autobuffer />
is what it try to insert.

If I just insert the mp3 link like this it does not work?

http://www.streamlook.com/v1/getmp3/e7f2fd265203080d4d5fca154aca9047/p0hFFMZX/ITBende/ITbende_0214_05-07-13.mp3


(James A. Anderson) #9

Seems to be working for me in Chrome on OSX. What browser are you using?


(Jeff Atwood) #10

Also works fine for me in IE11 on Windows 8.1.


(Martin Broerse) #11

It does not work in IE10. If you write it as one audio item it also works on IE10. See ITbende


(Martin Broerse) #12

Oh without change it now also works in IE10? Perhaps after it visited the other site? I will try to find the bug. Perhaps add the ‘preload=“metadata” autobuffer’ ?


(Martin Broerse) #13

I cleared the cache and restarted the browser but I still don’t see the bug again. I will try it on some other computers today.


(Martin Broerse) #14

Here is a printscreen of the bug.


(Jeff Atwood) #15

Confirmed working in Firefox latest as well.


(Jeff Atwood) #16

What bug? I am not clear, I cannot duplicate this “bug” on any browser?


(Martin Broerse) #17

Did you see my image? It seems to be random. It also seem that adding ‘preload=“metadata” autobuffer’ fixes this problem but I am not sure yet. Adding this wil safe a lot of bandwith S3/EC2 cost.


(Jeff Atwood) #18

You seem to have inserted a screenshot of the composer preview. While we try our best to make the preview match the final rendered post, it is not a guarantee. What does the final rendered post look like? Does it somehow work better if a single link is used rather than two links?


(Martin Broerse) #19

It seems to be random but 1 link seems to work better then more links. It also has this problem in the final view. I will try to create some html that always works and one that does not.


(Martin Broerse) #21

Image from Chrome:

http://www.broerse.net/wordpress/wp-content/uploads/2013/09/Chrome_Audio_Discource.jpg

You can random play about 4 to 6 mp3’s. Is is not always the first 4.