播放多个音轨(最多10个)并能够使声部静音

时间:2019-07-19 13:41:52

标签: javascript html5-audio

我正在尝试将JavaScript脚本编写为:

同时播放多达10-12 mp3的声音,同时静音,但仍在运行。     其目的是通过实时播放具有相同即兴演奏但具有不同踏板设置的按钮来演示吉他踏板。

一些帮助会很棒。目前,我只有一个脚本在两个轨道之间切换,该脚本来自先前的堆栈溢出线程:

  <audio id="audio1" src="with drums.wav"></audio>
        <audio id="audio2" src="without drums.wav"></audio>
         <div>Track one: <span id="playStatus1">stopped</span></div>
        <div>Track two: <span id="playStatus2">stopped</span></div>
        <div>Listening to: <span id="currTrack">nothing</span></div>
        <button id="start">Start the tracks rolling</button>
        <button id="toggle" disabled>Press to turn drums off/on...</button>


       <script>
         var startButton = document.getElementById("start");
         var toggleButton = document.getElementById("toggle");
         var track1 = document.getElementById("audio1");
         var track2 = document.getElementById("audio2");
         var status1 = document.getElementById("playStatus1");
         var status2 = document.getElementById("playStatus2");
         var currTrack = document.getElementById("currTrack");

         function updatePlayStatus(track, status, t){
           if (track.paused == true){
             status.innerHTML = "stopped";
             clearInterval(t);
             startButton.disabled = false;
             toggleButton.disabled = true;
             currTrack.innerHTML = "nothing";
           }
         }

            startButton.onclick = function(){
           this.disabled = true;
           track1.play();
           track2.play();
           track2.muted = true;
           status1.innerHTML = "playing";
           status2.innerHTML = "playing";
           currTrack.innerHTML = "Track 1";
           toggleButton.disabled = false;





var t1 = window.setInterval(function() { updatePlayStatus(track1, status1, t1) }, 500);
           var t2 = window.setInterval(function() { updatePlayStatus(track2, status2, t2) }, 500);
         }

         toggleButton.onclick = function(){
           if (track1.muted == true){
             track1.muted = false;
             track2.muted = true;
             currTrack.innerHTML = "Track 1";
           } else {
             track2.muted = false;
             track1.muted = true;
             currTrack.innerHTML = "Track 2";
           }
         }
       </script>

0 个答案:

没有答案