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

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -