Javascript Audio Play on click

Question

I have a javascript code  to start a sound on click   It works on chrome but on firefox it starts onload  but I want it onclick there too   Can anyone help    lt script gt  var audio   new Audio  http   music ogg       audio oncanplaythrough   function    audio play       audio loop   true   audio onended   function    audio play        lt  script gt    lt input type  image  src  http   button png  onclick  audio play    gt

User · Accepted Answer

Try the below code snippet    lt  doctype html gt   lt html gt     lt head gt       lt title gt Audio lt  title gt     lt  head gt     lt body gt        lt script gt        function play             var audio   document getElementById  audio            audio play                 lt  script gt        lt input type  button  value  PLAY  onclick  play    gt       lt audio id  audio  src  http   dev interactive-creation-works net 1 1 ogg  gt  lt  audio gt      lt  body gt   lt  html gt

User · Answer

That worked   lt audio src     song url    id  audio  gt  lt  audio gt   lt i class  glyphicon glyphicon-play-circle b-play  id  play  onclick  play    gt  lt  i gt    lt script gt      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                    lt  script gt

User · Answer

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

User · Answer

HTML   lt button onclick  quot play   quot  gt Play File lt  button gt   lt audio id  quot audio quot  src  quot https   s3 amazonaws com freecodecamp drums Heater-1 mp3 quot  gt  lt  audio gt   JavaScript  let play   function   document getElementById  quot audio quot   play

User · Answer

JavaScript  function playAudio url      new Audio url  play         HTML   lt img src  image png  onclick  playAudio  mysound mp3    gt    Supported in most modern browsers and easy to embed into HTML elements

User · Answer

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

[javascript] Javascript Audio Play on click

Examples related to javascript

Examples related to audio

Examples related to onclick