How to play MP3 audio with dynamic URL in HTML5 or JavaScript?

Question

In JavaScript or HTML5, how to play MP3 audio with dynamic, rather than static, URL?

Example - the following doesn't work:

<audio controls="controls">
  <source src="http://translate.google.com/translate_tts?tl=en&q=Hello%2C+World" type="audio/ogg">
</audio>

Thanks in advance!

Solution 1

That's audio/mpeg, not audio/ogg, as seen from headers:

Content-Type:audio/mpeg

Try this:

<audio controls="controls">
  <source src="http://translate.google.com/translate_tts?tl=en&q=Hello%2C+World" type="audio/mpeg">
</audio>

http://jsfiddle.net/ZCwHH/

Works in browsers that play mp3, like google chrome.

Solution 2

I am not sure what you are trying to achieve in your example but as far as playing audio with HTML5 is concerned you can simply do it in these ways:

Static Url:

<audio controls="controls">
  <source src="mySong.mp3" type="audio/mpeg">
</audio>

Dynamic Url: (just print that url in the src attribute)

<audio controls="controls">
  <source src="<%Reponse.Write(url);%>" type="audio/mpeg">
</audio>

Hope it solves this problem.