如何制作多个播放按钮？

Question

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

我试图绕过所有元素，但是曲目同时播放。

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

在jquery上我做到了，但我无法使用原生JavaScript。

＆＃13;

＆＃13;

<div class="all">
  <div class="row">
    <div class="column">
      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
          <tr>
            <td>1</td>
            <td>1</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="column">
      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
          <tr>
            <td>2</td>
            <td>2</td>
          </tr>
        </tbody>
      </table>

      <table class="centered">
        <thead>
          <tr>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
          <tr>
            <td>3</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

＆＃13;

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) + "%";
   });

}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

这样的事情会对你有帮助..

make function而不是window.onload和paremetrize it ..然后在start函数中调用每个..

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