Question

我是Javascript的新手（来自Python背景）

我需要一个带有几个按钮的HTML页面，每个按钮会在指定的时间点播放5秒的音频文件。

这是我目前的做法：

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

目前，'audio_file_1'和开始时间10秒在脚本中是硬编码的。如何将这些作为变量传递给'play_slice（）'函数，以便第一个按钮播放整数秒内的第一个音频文件？

Answer 1

在HTML中输入一些输入并在按下按钮时读取它们的值：

<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

您只需要在函数中添加一个额外的参数，如下所示。如果未通过，则将分配默认值（例如10）

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

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

2 个答案: