Play an audio file using jQuery when a button is clicked

Question

I am trying to play an audio file when I click the button, but it's not working, my html code is:

<html>    
    <body>
        <div id="container">
            <button id="play">
                Play Music
            </button>
        </div>
    </body>
</html>

my JavaScript is :

$('document').ready(function () {
    $('#play').click(function () {
        var audio = {};
        audio["walk"] = new Audio();
        audio["walk"].src = "http://www.rangde.org/static/bell-ring-01.mp3"
        audio["walk"].addEventListener('load', function () {
            audio["walk"].play();
        });
    });
});

I have created a Fiddle for that too.

Were you using [audio](http://www.w3schools.com/html5/html5_audio.asp) of HTML5 — OnesimusUnbound, Dec 13 '11 at 13:06

Ahmet Can Güven · Accepted Answer · 2016-11-09T23:11:58.523

Which approach?

You can play audio with <audio> tag or <object> or <embed>. Lazy loading(load when you need it) the sound is the best approach if its size is small. You can create the audio element dynamically, when its loaded you can start it with .play() and pause it with .pause().

Things we used

We will use canplay event to detect our file is ready to be played.

There is no .stop() function for audio elements. We can only pause them. And when we want to start from the beginning of the audio file we change its .currentTime. We will use this line in our example audioElement.currentTime = 0;. To achieve .stop() function we first pause the file then reset its time.

We may want to know the length of the audio file and the current playing time. We already learnt .currentTimeabove, to learn its length we use .duration.

Example Guide

When document is ready we created an audio element dynamically
We set its source with the audio we want to play.
We used 'ended' event to start file again.

When the currentTime is equal to its duration audio file will stop playing. Whenever you use play(), it will start from the beginning.

We used timeupdate event to update current time whenever audio .currentTime changes.
We used canplay event to update information when file is ready to be played.
We created buttons to play, pause, restart.

$(document).ready(function() {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
    
    audioElement.addEventListener('ended', function() {
        this.play();
    }, false);
    
    audioElement.addEventListener("canplay",function(){
        $("#length").text("Duration:" + audioElement.duration + " seconds");
        $("#source").text("Source:" + audioElement.src);
        $("#status").text("Status: Ready to play").css("color","green");
    });
    
    audioElement.addEventListener("timeupdate",function(){
        $("#currentTime").text("Current second:" + audioElement.currentTime);
    });
    
    $('#play').click(function() {
        audioElement.play();
        $("#status").text("Status: Playing");
    });
    
    $('#pause').click(function() {
        audioElement.pause();
        $("#status").text("Status: Paused");
    });
    
    $('#restart').click(function() {
        audioElement.currentTime = 0;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <h2>Sound Information</h2>
    <div id="length">Duration:</div>
    <div id="source">Source:</div>
    <div id="status" style="color:red;">Status: Loading</div>
    <hr>
    <h2>Control Buttons</h2>
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="restart">Restart</button>
    <hr>
    <h2>Playing Information</h2>
    <div id="currentTime">0</div>
</body>

[here](http://stackoverflow.com/a/16282412/2218697) is a markup which **mostly works in all browser**. — Shaiju T, Jun 28 '16 at 14:57
Very nice although the OP explicitly said he wanted to do this in jQuery. In your example you are using pure javascript for dom manipulation and event listeners. — Jacques, Oct 19 '18 at 14:23
I've a problem with this snippet: how I can stop automatically the audio when mp3 is ended? now, with my very short audio, this continue to sound in loop — Domenico Monaco, Dec 09 '19 at 09:08
@DomenicoMonaco Just remove `ended` event which plays the audio from the beginning. — Ahmet Can Güven, Dec 09 '19 at 10:56

felwithe · Answer 2 · 2020-04-22T17:02:55.737

$("#myAudioElement")[0].play();

It doesn't work with $("#myAudioElement").play() like you would expect. The official reason is that incorporating it into jQuery would add a play() method to every single element, which would cause unnecessary overhead. So instead you have to refer to it by its position in the array of DOM elements that you're retrieving with $("#myAudioElement"), aka 0.

This quote is from a bug that was submitted about it, which was closed as "feature/wontfix":

To do that we'd need to add a jQuery method name for each DOM element method name. And of course that method would do nothing for non-media elements so it doesn't seem like it would be worth the extra bytes it would take.

Thank you! Exactly what I was looking for! – utdrmac Aug 17 '16 at 04:31 — utdrmac, Aug 17 '16 at 04:31

score 24 · Answer 3 · answered Jan 28 '13 at 20:23

24

For anyone else following along, I've simply taken Ahmet's answer and updated the original asker's jsfiddle here, substituting:

audio.mp3

for

http://www.uscis.gov/files/nativedocuments/Track%2093.mp3

linking in a freely available mp3 off the web. Thank you for sharing the easy solution!

answered Jan 28 '13 at 20:23

texas-bronius

558
4
11

Works on Firefox 42 on Ubuntu – Bojan Kogoj Dec 07 '15 at 15:31
1

The load event doesn't fire in this jsfiiddle in Chrome. It only plays because of the autoplay attribute. – Tom Sep 24 '16 at 16:09

score 14 · Answer 4 · answered Jul 09 '14 at 14:45

I here have a nice and versatile solution with a fallback:

<script type="text/javascript">
    var audiotypes={
        "mp3": "audio/mpeg",
        "mp4": "audio/mp4",
        "ogg": "audio/ogg",
        "wav": "audio/wav"
    }

    function ss_soundbits(sound){
        var audio_element = document.createElement('audio')
        if (audio_element.canPlayType){
            for (var i=0; i<arguments.length; i++){
                var source_element = document.createElement('source')
                source_element.setAttribute('src', arguments[i])
                if (arguments[i].match(/\.(\w+)$/i))
                    source_element.setAttribute('type', audiotypes[RegExp.$1])
                audio_element.appendChild(source_element)
            }
            audio_element.load()
            audio_element.playclip=function(){
                audio_element.pause()
                audio_element.currentTime=0
                audio_element.play()
            }
            return audio_element
        }
    }
</script>

After that you can initialize as many audio as you like:

<script type="text/javascript" >
    var clicksound  = ss_soundbits('your/path/to/click.ogg', "your/path/to/click.mp3");
    var plopsound  = ss_soundbits('your/path/to/plopp.ogg', "your/path/to/plopp.mp3");
</script>

Now you can reach the initialized audio element whereever you like with simple event calls like

onclick="clicksound.playclip()"

onmouseover="plopsound.playclip()"

score 13 · Answer 5 · edited Jun 18 '21 at 16:04

13

What about:

$('#play').click(function() {
  const audio = new Audio("https://freesound.org/data/previews/501/501690_1661766-lq.mp3");
  audio.play();
});

edited Jun 18 '21 at 16:04

BarryCap

326
3
11

answered Feb 29 '20 at 19:06

Luis David

754
8
14

that's the simplest way, works like a charm and you can fire this same action using vanilla js events if you want. – Andrea Mauro Jun 15 '20 at 13:55

score 5 · Answer 6 · edited Jun 19 '21 at 04:39

5

JSFiddle Demonstration

This is what I use with jQuery:

$('.button').on('click', function () { 
    var obj = document.createElement('audio');
    obj.src = 'linktoyourfile.wav'; 
    obj.play(); 
});

edited Jun 19 '21 at 04:39

BarryCap

326
3
11

answered Sep 23 '19 at 01:51

Jeff

1,018
1
15
33

Play an audio file using jQuery when a button is clicked

6 Answers6

Which approach?

Things we used

Example Guide

Linked