如何制作多个播放按钮？

Question

我有一个按钮的代码，如何做多个？ image example

我试图绕过所有的元素，但轨道同时播放。

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

jQuery的，我做到了，但我不能在本地JavaScript。

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

这样的事情会帮助你..

进行函数，而不是在window.onload和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