Javascript play sound (wav, MP3, etc) in one line

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.

17 Replies to “Javascript play sound (wav, MP3, etc) in one line”

  1. 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= “”;
    }

  2. Hi,
    I found a even more simple solution:
    <audio>
    <source src=/music/song.ogg>
    <source src=/music/song.mp3>
    <embed src=/music/song>
    </audio>

  3. Thanks for this. Some of the techniques out there are so freaking excessive, especially for making one simple sound file play.

  4. 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.

  5. 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.

  6. 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.

  7. 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.
    }

Leave a Reply

Your email address will not be published. Required fields are marked *