[WEB] HTML Audio 태그로 MP3 여러곡 이어서 재생하기

크롬에서 플래쉬 관련 기능들이 하나씩 안되고 있음.
회사 웹페이지 중 하나가 플래쉬 기반이라... ㅠㅠ

암튼 이곳저곳에서 MP3가지고 와서 한번에 6개 이상의 MP3 재생 필요.
HTML5 AUDIO TAG로 구현.

출처 : https://www.technote.co.kr/php/technote1/board.php?board=apple2&command=body&no=295

고마운신 분이 올리신 소스를 토대로 약간 수정.  플레이 버튼 누르면 처음부터 끝까지 재생되고 다시 누르면 
다시 처음부터 재생.


<script type='text/javascript'>
//<![CDATA[ 
$(window).load(function(){
   var audio;
   var playlist;
   var tracks;
   var current;
   init();

   function init(){

      current = 0;
      audio = $('audio');
      playlist = $('#audio1');
      tracks = playlist.find('source');
      len = tracks.length - 0;   
      audio[0].volume = 1.0;

      //console.log(tracks);

      audio[0].addEventListener('ended',function(e){

         current++;

         if(current < len ){
            
            link = playlist.find('source')[current];

            run($(link),audio[0]);
         }else {
            current = 0;
         }

      });

   }
   function run(link, player){
         player.src = link.attr('src');
         par = link.parent();
         par.addClass('active').siblings().removeClass('active');
         audio[0].load();
         audio[0].play();   
   }

    $('#pb').on('click', function(e){
        
/*        var myAudio = document.getElementById("audio1");
        if (myAudio.paused) { 
            myAudio.play(); 
        } else { 
            myAudio.pause(); 
        }*/  누르면 재생 다시 누르면 정지 다시 누르면 재생.... 하지만 처음부터 다시 재생이 안됨....
// removeAttr걸로 다시 처음부터 재생 가능하게 됨.
        $('#audio1').removeAttr('src');
        $('#audio1').removeAttr('active');

        audio[0].play();

    });
});

//]]>  


</script>

댓글

이 블로그의 인기 게시물

[문서] excel 체크박스 삭제

[DB] MySQL 백업 / 복원

[WEB] ASP.NET System.NullReferenceException: 개체 참조가 개체의 인스턴스로 설정되지 않았습니다.