html - Javascript:: Play multiple audio files via HTML5 Audio Player playlist -


i'm working on code play html5 audio file(s).

let start code first easier explain.

here code :

<style> .btn {     background:#fff;     border-radius:5px;     border:1px solid #000;     height:25px;     width:25px }  .play:after {     content:">" }  .pause:after {     content:"||" } </style>  <button class="btn play" id=hezigangina-gravity></button> <button class="btn play" id=hezigangina-pug></button>  <script>   ibtn=document.getelementsbytagname('button');  for(j=0;j<ibtn.length;j++) {     ibtn[j].addeventlistener     (         'click',         function()         {             var audio=new audio(this.id+'.mp3');              if(audio.pause)             {                 audio.play();                        ibtn[j].classlist.remove("play");                 ibtn[j].classlist.add("pause");             }             else             {                 audio.pause();                 ibtn[j].classlist.remove("pause");                 ibtn[j].classlist.add("play");             }          },false     ); }  </script> 

my current script working fine play selected audio file still have 2 issues solved.

  1. i want able change class name on current pressed button play pause , vice versa.

  2. i want able disable other audio file(s) (only) when other track selected.

[optional]::is possible create ogg audio file fallback pure javascript (as same stacking <source> tags html)?

  1. change audio.pause audio.paused
  2. before play new track pause tracks

    if(audio.paused) {   var audios = document.getelementsbytagname('audio');    (i = 0; < audios.length; i++) {     audios[i].pause();   }    audio.play();          ibtn[j].classlist.remove("play");   ibtn[j].classlist.add("pause"); } else {   audio.pause();   ibtn[j].classlist.remove("pause");   ibtn[j].classlist.add("play"); } 

hope you.

as optional question, can check browser using this thread. , make if statement when create audio check browser. if it's ie or safari, load mp3, else, load ogg.


Comments

Popular posts from this blog

Payment information shows nothing in one page checkout page magento -

tcpdump - How to check if server received packet (acknowledged) -