70

I have a JavaScript code to play a sound on click. It works on Chrome but on Firefox it starts on load.

Can anyone help?

<script>
var audio = new Audio("http://music.ogg");

audio.oncanplaythrough = function(){
audio.play();
}

audio.loop = true;

audio.onended = function(){
audio.play();
}

</script>

<input type="image" src="http://button.png" onclick="audio.play()">
BarryCap
  • 326
  • 3
  • 11
dA_uNknOwN
  • 931
  • 2
  • 14
  • 23

7 Answers7

122

Try the below code snippet

<!doctype html>
<html>
  <head>
    <title>Audio</title>
  </head>
  <body>

    <script>
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>

    <input type="button" value="PLAY" onclick="play()">
    <audio id="audio" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>

  </body>
</html>
BarryCap
  • 326
  • 3
  • 11
Arunkumar
  • 5,150
  • 4
  • 28
  • 40
32

JavaScript

function playAudio(url) {
  new Audio(url).play();
}


HTML

<img src="image.png" onclick="playAudio('mysound.mp3')">


Supported in most modern browsers and easy to embed into HTML elements.

  • 7
    If anyone experiences a delay, just use `var audio = new Audio(url);` once on page load. Then trigger it by `audio.currentTime = 0; audio.play();`. Resetting current time is only needed if the sound is played in short bursts – williamsi Feb 04 '20 at 19:36
  • 1
    Is there any need to garbage collect? Is there a mem leak if I repeat that for thousands of times? – Bitterblue Aug 28 '21 at 09:41
6

That worked

<audio src="${ song.url }" id="audio"></audio>
<i class="glyphicon glyphicon-play-circle b-play" id="play" onclick="play()"></i>

<script>
    function play() {
        var audio = document.getElementById('audio');
        if (audio.paused) {
            audio.play();
            $('#play').removeClass('glyphicon-play-circle')
            $('#play').addClass('glyphicon-pause')
        }else{
            audio.pause();
            audio.currentTime = 0
            $('#play').addClass('glyphicon-play-circle')
            $('#play').removeClass('glyphicon-pause')
        }
    }
</script>
Alex Karahanidi
  • 921
  • 6
  • 13
4

You can do that in two line

let playSound = () => new Audio("src").play()
<button onclick="playSound()">Play</button>
Ahmad Moghazi
  • 1,419
  • 13
  • 15
3

Now that the Web Audio API is here and gaining browser support, that could be a more robust option.

Zounds is a primitive wrapper around that API for playing simple one-shot sounds with a minimum of boilerplate at the point of use.

Dave E
  • 123
  • 1
  • 8
2

While several answers are similar, I still had an issue - the user would click the button several times, playing the audio over itself (either it was clicked by accident or they were just 'playing'....)

An easy fix:

var music = new Audio();
function playMusic(file) {
    music.pause();
    music = new Audio(file);
    music.play();
}

Setting up the audio on load allowed 'music' to be paused every time the function is called - effectively stopping the 'noise' even if they user clicks the button several times (and there is also no need to turn off the button, though for user experience it may be something you want to do).

Apps-n-Add-Ons
  • 2,026
  • 1
  • 17
  • 28
1

HTML:

<button onclick="play()">Play File</button>
<audio id="audio" src="https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"></audio>

JavaScript:

let play = function(){document.getElementById("audio").play()}
fruitloaf
  • 1,628
  • 15
  • 10