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    lt html gt           lt body gt           lt div id  container  gt               lt button id  play  gt                  Play Music              lt  button gt           lt  div gt       lt  body gt   lt  html gt    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

User · Answer

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

User · Answer

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

User · Answer

What about    x000D   x000D      play   click function     x000D    const audio   new Audio  https   freesound org data previews 501 501690 1661766-lq mp3    x000D    audio play    x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I here have a nice and versatile solution with a fallback    lt script type  text javascript  gt      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 lt 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                  lt  script gt    After that you can initialize as many audio as you like    lt script type  text javascript   gt      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     lt  script gt    Now you can reach the initialized audio element whereever you like with simple event calls like  onclick  clicksound playclip     onmouseover  plopsound playclip

User · Answer

JSFiddle Demonstration  This is what I use with JQuery       button   on  click   function           var obj   document createElement  audio            obj src    linktoyourfile wav            obj play

User · Answer

Which approach   You can play audio with  lt audio gt  tag or  lt object gt  or  lt embed gt    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      x000D   x000D    document  ready function     x000D      var audioElement   document createElement  audio    x000D      audioElement setAttribute  src    http   www soundjay com misc sounds bell-ringing-01 mp3    x000D       x000D      audioElement addEventListener  ended   function     x000D          this play    x000D         false   x000D       x000D      audioElement addEventListener  canplay  function    x000D              length   text  Duration     audioElement duration     seconds    x000D              source   text  Source     audioElement src   x000D              status   text  Status  Ready to play   css  color   green    x000D          x000D       x000D      audioElement addEventListener  timeupdate  function    x000D              currentTime   text  Current second     audioElement currentTime   x000D          x000D       x000D          play   click function     x000D          audioElement play    x000D              status   text  Status  Playing    x000D          x000D       x000D          pause   click function     x000D          audioElement pause    x000D              status   text  Status  Paused    x000D          x000D       x000D          restart   click function     x000D          audioElement currentTime   0  x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt body gt  x000D       lt h2 gt Sound Information lt  h2 gt  x000D       lt div id  length  gt Duration  lt  div gt  x000D       lt div id  source  gt Source  lt  div gt  x000D       lt div id  status  style  color red   gt Status  Loading lt  div gt  x000D       lt hr gt  x000D       lt h2 gt Control Buttons lt  h2 gt  x000D       lt button id  play  gt Play lt  button gt  x000D       lt button id  pause  gt Pause lt  button gt  x000D       lt button id  restart  gt Restart lt  button gt  x000D       lt hr gt  x000D       lt h2 gt Playing Information lt  h2 gt  x000D       lt div id  currentTime  gt 0 lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

[javascript] Play an audio file using jQuery when a button is clicked

Examples related to javascript

Examples related to jquery

Examples related to html