자바 스크립트에서 페이지의 모든 오디오 파일 샘플을 재생하는 버튼을 만드는 방법은 무엇입니까?

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(); 
} 

: 여기에 그 일을 내 자바 스크립트입니다. 아무도 내가이 일을 어떻게 할 것인지 알고 있니?

Answer 1

주 코드와 콜백 사이의 핑퐁이기 때문에 비동기 적으로 작업해야합니다. 이런 식으로 뭔가 :

// 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. 

W3 스쿨에서 this for an overview, 같은 웹 사이트에서이 as an example를 참조 HTML5에서 오디오 컨트롤을 이해하십시오.

주목할만한 메모 : Javascript는 CamelCase를 규칙으로 사용하고 Python처럼 snake_case를 사용하지 않습니다.

Answer 2

단계를 말씀 드리지만 스택 오버플로는 코드 작성 서비스가 아니므로 코드를 작성하지 않겠습니다.

첫째, 하나에서 다섯 루프 반복하는 카운터와 기능을 실행 클릭 배열을 만들고 그 안에

두 번째로 모든 파일 이름을 저장 버튼 버튼,

셋째 클릭 얻는다. 카운터를 색인으로 사용하고 배열 [counter]로 파일을 5 초 동안 재생 한 다음 카운터를 계속 사용하십시오.

5 초 후에 파일을 중지하는 대신 5 초 클립을 사용하는 것이 더 효율적입니다. 그래서 5 초 파일을 저장하고 증분 카운터 (주석에서 @thomas Smith의 아이디어)를 재생하십시오.