的Javascript：從單一的HTML頁面

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>