javascriptでページ内のすべてのオーディオファイルのサンプルを再生するボタンを作る方法は？

Question

ディレクトリからオーディオファイルを動的に読み込むコードがあります。今すぐdivをクリックすると再生/一時停止します。私は、各オーディオファイルの5秒のように再生し、順番にそれらを介して実行されるボタンを作りたい

function get_list_of_files_from_html(html_string){ 
     var el = document.createElement('html'); 
     el.innerHTML = html_string; 

     var list_of_files = el.getElementsByTagName('a'); 

    var return_string ='<UL>'; 

     for(var i=5; i < list_of_files.length ; i++){ 
      var current_string = list_of_files[i]; 
      var new_string = 
current_string.toString().replace 
(/http:\/\/www.website.com\/~user\/programming\//g,''); 
      var brand_new = new_string.replace('.mp3',''); 
      return_string += '<div class="floating"  
onclick="playAudio(\'audio_tag_id'+i+'\')" >'+brand_new+'<audio 
id="audio_tag_id'+i+'"> <source src = "'+current_string+'" 
type="audio/mpeg"></audio>'; 
      return_string += '</div>'; 
     } 


      return return_string; 
     } 

function playAudio(tag_id){ 
    var audio= document.getElementById(tag_id); 
return audio.paused ? audio.play() : audio.pause(); 
} 

：ここではそれをやって、私のjavascriptのです。誰も私がこれをやっていく方法を知っていますか？

Answer 1

メインコードとコールバックの間のピンポンですので、非同期で作業する必要があります。このような何か：HTML5のオーディオコントロールを理解するための

// The click event handler 
function onPlayClicked(event){ 
    if (!window.HTMLAudioElement){ 
     console.write("Error: no audio"); 
     return; 
    } 

    // toggle the state of the playlist not the actual music player 
    isPlaying = !isPlaying; 
    if (isPlaying) startPlaying(); 
    else resetList(); // if clicked while playing 
} 

// sets timer and plays current 
function startPlaying(){ 
    if (isPlaying){ // just checking that no one pressed the STOP in the meantime... 
     setTimout(done, 5000); // timer callback and miliseconds 
     playAudio(); 
    } 
} 


// stops this song and starts next. Callback from timer 
function done(){ 
    if (nowPlaying == lastSongIndex(){ 
     pauseAudio(); 
     resetPlaylist(); 
     return; 
    } 
    if (isPlaying){ 
     pauseAudio(); 
     nowPlaying++; 
     startPlaying(); 
} 

// plays current audio 
function playAudio(){ 
    // Friendly advice: don't use getElementByTag. There may be other 'a's. 
    audioList = document.getElementById('audiolist'); 
    audioURL = audioList[nowPlaying]; // nowPlaying advanced by done() 
    urlregex = '/http:\/\/www.website.com\/~user\/programming\//g'; 
    audioData = audioUrl.remove(urlregex).replace('.mp3',''); 

    player = document.getElementById('audioplayer'); 
    player.src = audioData; 
    player.play(); 
} 

function pauseAudio(){ 
    player = document.getElementById('audioplayer'); 
    player.pause(); 
} 

function reset(){ 
    pauseAudio(); 
    nowPlaying = 0; 
    isPlaying = false; 
    // Unpress the button 
} 
// you can easily fill in the rest. 

は同じウェブサイトにW3Schoolsのでthis for an overview、このas an exampleを参照してください。

また、JavascriptはCamelCaseを規約として使用し、Pythonのようにsnake_caseでは使用しません。

Answer 2

手順を教えてあげますが、スタックオーバーフローはコード作成サービスではないため、コードを記述しません。

まず、1から5までのカウンタを反復forループで関数を実行]をクリックし、配列を作成し、それに

第二に、すべてのファイル名を格納し、ボタンは、ボタンの上に、

サードをクリックします。カウンタをインデックスとして使用し、配列[カウンタ]で5秒間だけ再生してからカウンタを続行します。

5秒でファイルを停止するのではなく、5秒のクリップを使用する方が効率的です。 5秒間のファイルも保存して、カウンターを増やしながら演奏してください。（コメントで@thomas Smithのアイデア）