CODEWITHSUNDEEP
jqueryhtmlhtml5-audio
clintgh
clintgh

Reputation: 2077

Playing a sound using JQUERY or HTML5 from URL

Here's what I want to do:
I want to show a list of filenames (e.g: Voice_003.wav) and when the user clicks the filename the sound plays in the browser. (supports different audio formats like m4a, 3gpp, wav, etc.)

The data will be coming from the API and it will be returning something like this: http://the.ser.ver:0000/resources/MAC002/Q7/596.3gpp

In my attempt, i tried using the following code but with no success:

<audio controls="controls">' 
    <source src="http://the.ser.ver:0000/resources/MAC002/Q7/596.3gpp"></source>
</audio>

Upvotes: 0

Views: 1014

Answers (3)

tpdietz
tpdietz

Reputation: 1368

Like another answer has explained, HTML5 audio element only supports mp3, wav, and ogg. Another problem with this approach is that not all browsers support all file types.

If you intend on using the html5 audio element, your best approach will be to provide the audio tracks in enough formats that support the majority of your audience. A fast and free tool that can do this for you is ffmpeg.

Please refer here: http://www.w3schools.com/tags/tag_audio.asp for more information.

As a side note, all browsers that support the audio tag can usually figure out the "type" attribute for you, although it doesn't hurt to include it.

To address your comment/question, there are other certainly other ways to play audio files. A popular choice is flash. Which is typically used as a fallback when using the html5 audio element as there are still users that have older browsers that don't support it. In my opinion, you should convert your audio files to a more compatible type, such as an mp3. Then use the html5 audio player to play it, and in the event a browser doesn't support html5 audio playing mp3, you can have a flash fallback play the mp3. Here is a good reference: http://matt.coneybeare.me/getting-html5-audio-tag-and-flash-fallback-to/

Good luck.

Upvotes: 0

tomaoq
tomaoq

Reputation: 3056

The audio element doesn't support every existing audio format yet. Only mp3, wav and ogg and some more depending on the browser are supported.

Also, you can try to add the type attribute in the source element.

<audio controls="controls">
    <source src="http://the.ser.ver:0000/resources/MAC002/Q7/yourfile.ogg" type="audio/ogg"></source>
</audio>

Upvotes: 1

Georgi Naumov
Georgi Naumov

Reputation: 4201

Do you tried this? http://www.schillmania.com/projects/soundmanager2/ May be will help you.

Upvotes: 1

Related Questions