Javascript：从单个HTML页面播放多个音频文件

Question

I'm new to Javascript (from a Python background)

I need an HTML page with several buttons, each of which will play 5 seconds of an audio file starting a specified point in time.

Here's my current approach:

 <audio id="audio_file_1"> <source src="path/to/file/audio_file_1.wav" type="audio/wav"> </audio><br> <audio id="audio_file_2"> <source src="path/to/file/audio_file_2.wav" type="audio/wav"> </audio><br> <button onclick="play_slice()" type="button">Play</button> <button onclick="play_slice()" type="button">Play</button> <script> function play_slice() { var x = document.getElementById("audio_file_1"); x.currentTime = 10; x.play(); setTimeout(function (){ x.pause(); }, 5000); } </script> 

Currently, 'audio_file_1' and the start time, 10 seconds, are hardcoded in the script. How can I pass these as variables to the 'play_slice()' function, so that the first button plays the first audio file from an integer number of seconds?

Answer 1

Put some inputs in your HTML and read their values when the button is pressed :

 <audio id="audio_file_1"> <source src="path/to/file/audio_file_1.wav" type="audio/wav"> </audio><br> <audio id="audio_file_2"> <source src="path/to/file/audio_file_2.wav" type="audio/wav"> </audio><br> <input type="number" name="time" id="time" value="10" /> <select id="track"> <option value="audio_file_1">audio 1</option> <option value="audio_file_2">audio 2</option> </select> <button onclick="play_slice()" type="button">Play</button> <button onclick="play_slice()" type="button">Play</button> <script> function play_slice() { var x = document.getElementById(document.getElementById("track").value); x.currentTime = +document.getElementById("time").value; x.play(); setTimeout(function (){ x.pause(); }, 5000); } </script> 

Answer 2

You will simply need to add an additional argument to your function as below. And if it is not passed, a default value, 10 for instance, will be assigned

<audio id="audio_file_1">
  <source src="path/to/file/audio_file_1.wav" type="audio/wav">
</audio><br>
<audio id="audio_file_2">
  <source src="path/to/file/audio_file_2.wav" type="audio/wav">
</audio><br>
<button onclick="play_slice('audio_file_1',10)" type="button">Play</button>        
<button onclick="play_slice('audio_file_2')" type="button">Play</button>        

<script>
  function play_slice(currentTime) { 
  var x = document.getElementById(audioId);
  x.currentTime = currentTime || 10;
  x.play();
    setTimeout(function (){
      x.pause();
      }, 5000);       
    } 
</script>