여러 개의 재생 버튼을 만드는 방법은 무엇입니까?

Question

하나의 버튼에 대한 코드가 있는데, 여러 개를 수행하는 방법은 무엇입니까? image example

모든 요소를 ​​둘러 보려고했으나 트랙이 동시에 재생되었습니다.

http://codepen.io/anon/pen/mmyaQx

JQuery와에 나는 그것을했다,하지만 난하지 네이티브 자바 스크립트가 있습니다.

window.onload = function(){ 
 

 
    var myAudio = document.getElementById('my-audio'); 
 
    var play = document.getElementById('play'); 
 
    var pause = document.getElementById('pause'); 
 
    var loading = document.getElementById('loading'); 
 
    var bar = document.getElementById('bar'); 
 

 
    function displayControls() { 
 
     loading.style.display = "none"; 
 
     play.style.display = "block"; 
 
    } 
 

 
    // check that the media is ready before displaying the controls 
 
    if (myAudio.paused) { 
 
     displayControls(); 
 
    } else { 
 
     // not ready yet - wait for canplay event 
 
     myAudio.addEventListener('canplay', function() { 
 
     displayControls(); 
 
     }); 
 
    } 
 
    
 
    play.addEventListener('click', function() { 
 
     myAudio.play(); 
 
     play.style.display = "none"; 
 
     pause.style.display = "block"; 
 
    }); 
 
    
 
    pause.addEventListener('click', function() { 
 
     myAudio.pause(); 
 
     pause.style.display = "none"; 
 
     play.style.display = "block"; 
 
    }); 
 
    
 
    // display progress 
 
    
 
    myAudio.addEventListener('timeupdate', function() { 
 
     //sets the percentage 
 
     bar.style.width = parseInt(((myAudio.currentTime/myAudio.duration) * 100), 10) + "%"; 
 
    }); 
 

 
}

#controls { 
 
    width: 80px; 
 
    float: left; 
 
} 
 
    
 
#progress { 
 
    margin-left: 80px; 
 
    border: 1px solid black; 
 
} 
 

 
#bar { 
 
    height: 20px; 
 
    background-color: green; 
 
    width: 0; 
 
}

<audio id="my-audio"> 
 
    <source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg"> 
 
    <source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg"> 
 
</audio> 
 

 
<div id="controls"> 
 
    <span id="loading">loading</span> 
 
    <button id="play" style="display:none">play</button> 
 
    <button id="pause" style="display:none" >pause</button> 
 
</div> 
 
<div id="progress"> 
 
    <div id="bar"></div> 
 
</div>

Answer 1

난 당신이 무엇을 달성하고자하는 모르지만, 당신이 바퀴를 재발견하려고하는 것 같다 ...

당신은 당신이 컨트롤을 활성화 할 수 있음을 알고 계십니까 HTML5 오디오 플레이어? :)이 같은

<audio controls> 
 
    <source src="http://jPlayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg"> 
 
    <source src="http://jPlayer.org/audio/ogg/Miaow-07-Bubble.ogg" type="audio/ogg"> 
 
</audio>

Answer 2

뭔가 .. 다음 스타트 기능의 각 호출 .. .. 대신 창로드의

메이크업 기능을 사용하면 도움을 paremetrize합니다

function start(){ 
    buildOne('my-audio', 'play', 'pause', 'loading', 'bar'); 
    buildOne('my-audio2', 'play2', 'pause2', 'loading2', 'bar2'); 
} 

window.onload = start; 

전체 예제는 여기입니다 : http://codepen.io/mkdizajn/pen/ZKYwEQ?editors=1011