[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>
회사 웹페이지 중 하나가 플래쉬 기반이라... ㅠㅠ
암튼 이곳저곳에서 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>
댓글
댓글 쓰기