Alright, enough with the 10 page tutorials from 2006 describing detailed browser-specific implementation tricks to get sound playing. Google needs a refresh. In my experience in the 2010’s, here’s all you need to do to make a simple sound play in your web page:
Step one: add an element to your page
Step two: play a sound via that element
document.getElementById("sound_element").innerHTML=
"
Or, if you’re using jQuery:
$('#sound_element').html(
"
I’ve tried it in Firefox, Chrome and IE and it works like a charm for me. I’d imagine that your user has to have some basic sound software installed in their computer, but at this point, I’d reckon 99% of users do.
Feel free to add to the comments if you find any embellishments necessary to get this working.
thanks!!
But it doesn’t work for Opera and Chrome for OS X in my case. I found a solution here: http://www.scriptwell.net/howtoplaysound.htm
here is code:
var mimeType = “application/x-mplayer2”; //default
var agt = navigator.userAgent.toLowerCase();
function getMimeType(){
if (navigator.mimeTypes && agt.indexOf(“windows”)==-1)
{
// non-IE, no-Windows
var plugin=navigator.mimeTypes[“audio/mpeg”].enabledPlugin;
// Mac/Safari & Linux/FFox
if (plugin)
mimeType=”audio/mpeg”;
}//end no-Windows
return mimeType
}//end function getMimeType
mimeType = getMimeType();
function playSound(){
soundElement.innerHTML= “”;
}
Hi,
I found a even more simple solution:
<audio>
<source src=/music/song.ogg>
<source src=/music/song.mp3>
<embed src=/music/song>
</audio>
Great!
Exactly what I was looking for!
Simple, works perfect. Thanks!
Hey man thanx a lot it really worked beautifully
Thanks for this. Some of the techniques out there are so freaking excessive, especially for making one simple sound file play.
This is html5 code. I need some code for all web explorer by javascript not html5
Hey guys, is there any working script for tagged widget mp3 player?
I need to play this song with auto start and auto loop on my page : http://almora.palco.fm/hinos/hino_liverpool.mp3
This worked great! Thanks!
Thank u so much, this work!
The plugin is great but what about browser compapibility?
Hey Aizad,
Please don’t do that. I detest websites that auto play music. I am almost always listening to something else and it is very invasive. I am sure I am not alone in this.
Auch, you better use this:
new Audio(“SOURCE”).play
I have recorded the audio but i m facing difficulty in playing it back because it is in .src format.please help me to do this using javascript without using libraries.
Very good tutorial there is another way to play sound using javascipt here i found a tutorial with demo http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php
Super good solution, I was searching everywhere to find solution to play audio dynamically in IE8. Yes we still support IE8 🙂 your solution works, and u saved the day.
The “audio.play()” does not play each short MP3 file one by one. What did I do wrong, or maybe it just would not work?
I made four MP3 files: koj.mp3, moog.mp3, dlaab.mp3 and tsi.mp3
I thought that it was so simple, but it is not.
Any help will be appreciated, and thank you in advance.
Here are the codes:
var talk = “Koj moog dlaab tsi”;// a string with words in Hmong = Where do you go? in English
var arrayStr = talk.split(” “);//get each word into an array
var talkArray = [];
var word;
for (var i = 0; i < arrayStr.length; i++) {//put words into array
word = arrayStr[i].trim().toLowerCase();
talkArray.push(word);
}
for (var i = 0; i < arrayStr.length; i++){//get each word from array to get MP3 file to pay its sound
setTimeout(playAudio(talkArray[i]), 1000);//call the play audio function
}
function playAudio(fileName){//make file name from word passed by caller
var audio = new Audio("audio/" + fileName + ".mp3");
audio.play();
//alert("File: " + audio.src);//without pausing on this line, it would play all four files very fast in a flash. If I remove the comment on this line, it would play fine because it would pause.
}