機能が終了していても、オーディオのシーケンスを連続して再生することはできません

Question

すべてのオーディオファイルを、各オーディオ間の時間間隔で順番に再生しようとしています。今、私は最初のオーディオを再生することができますが、もう一度再生ボタンをクリックして2番目のオーディオを再生する必要があります。終了関数はこれを処理する必要がありますか？あなたの優しさとお手伝いを感謝します。

var playList = [{ 
     "duration": 1000, 
     "value": "0_silence" 
    }, { 
     "duration": 4000, 
     "value": "1_hello" 
    }, { 
     "duration": 6000, 
     "value": "2_how_old" 
    }]; 

$(document).ready(function() { 
    var audioElement = document.createElement('audio'); 

     var i = 0; 
     $("#play").on("click", function(){ 

      audioElement.addEventListener("ended", playAudio(playList)); 
       function playAudio() { 
        if(i < playList.length) { 
         audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav'); 

         setTimeout(function(){audioElement.play(); playAudio, playList[i].duration;}); 

         i++; 
        } else { 
         i = 0; 
        } 
       } 
     }); 

    //   playAudio(playList); 
    //   }); 
    //     
    //   function playAudio() { 
    //   var audioElement = document.createElement('audio'); 
    //   audioElement.addEventListener("ended", playAudio(playList)); 
    //   if (i < playList.length) { 
    //      
    //   var audioElement = document.createElement('audio'); 
    //   audioElement.addEventListener("ended", playAudio(playList));     

    //   audioElement.setAttribute('src', 'sound/' + playList[i].value + '.wav'); 
    //   audioElement.play(); 
    //   setTimeout(playAudio, playList[i].duration); 
    //   i++; 
    //   } else { 
    //   i = 0; // reset i to zero to start over if button clicked again 
    //   } 
    //   } 
} 

Answer 1

最初のエラーは、この行にある：ここ

audioElement.addEventListener("ended", playAudio(playList)); 

機能playAudio()が呼び出されると（この場合undefined）からの結果はもちろんの引数としてaddEventListener()に渡されます動作しません。 playListがグローバルである場合、単純にそれを変更します。また

audioElement.addEventListener("ended", playAudio); // function is now referenced 

、ハンドラは、再生ボタンがクリックされるたびに呼び出されます。要素が作成されるときに一度だけ追加します。

ポストに示されているように、setTimeout()コールにエラーがあります。これは、時間引数がなくなり、機能ブロック内に無効な文が含まれているためです。

ただし、この呼び出しを使用する必要はありません。これは、最新のブラウザでは、呼び出しにキューを作成する要素のplay()を呼び出します。古いブラウザの場合は、canplayイベントを使用する必要があります。どちらの場合でもsetTimeout()は推奨しません。

さらにplay()の前にcall load()をリセットしてクリーンアップし、新しいソースの読み込みを開始する必要があります。

最後に、ループでリストを再生しようとする場合、最後のトラックが再生されたときにリストが失敗します。iは、再生を呼び出さない別のelseブロックでリセットされます。

再生中にサンプルが読み込まれないようにするには、再生ボタンの動作を考慮する必要があります（つまり、一時停止/再生を切り替える）。

var playList = [{ 
 
    "duration": 1000, 
 
    "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/257[kb]50s_space_telemetry.aif.mp3" 
 
}, { 
 
    "duration": 4000, 
 
    "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/85[kb]analog_alarm_up.aif.mp3" 
 
}, { 
 
    "duration": 6000, 
 
    "value": "http://sampleswap.org/samples-ghost/SFX%20and%20UNUSUAL%20SOUNDS/ELECTRO%20and%20SYNTHETIC/42[kb]alien_alarm.aif.mp3" 
 
}]; 
 

 
$(document).ready(function() { 
 
    var audioElement = document.createElement('audio'); 
 
    
 
    // reference function instead of calling it. Also, only set it once. 
 
    audioElement.addEventListener("ended", playAudio); 
 
    
 
    var i = 0; 
 
    $("#play").on("click", playAudio); // rewired to share playAudio() 
 
    
 
    function playAudio() { 
 
    var entry = playList[i++];  // get current entry, increment i 
 
    if (i >= playList.length) i = 0; // if i=> length, reset 
 

 
    audioElement.src = entry.value; // <- for demo samples only. 'sound/' + entry.value + '.wav'; 
 
    audioElement.load();    // cleanup old fun, invoke loading of new 
 
    audioElement.play();    // cue up play 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id=play>Play</button>