0

我有许多按钮播放许多不同的声音 - 每个按钮在单击时播放不同的 mp3。示例代码：

<a onclick="this.firstChild.play()"><audio src="1.mp3"  ></audio>1</a>

对于移动设备，我试图从同一个 mp3 文件中播放所有不同的声音，因此我可以预加载 1 个文件并获得更多即时体验。

因此，我需要设置单击时要播放的 mp3 的起点和终点。

如何使用音频 html5 或 javascript 做到这一点？仅使用 chrome 就足够了...

4

2 回答 2

1

如果我的问题正确，您想同时或随时播放音频文件的不同时间戳

这是您可以使用的一个示例

<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:00" 
       >
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:00:56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=00:01:00" >
</audio>Part 3
</a>

您也可以以秒为单位给出时间，而不是像时间戳一样

<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=0" 
       >
</audio>Part 1
</a>
<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t=56" >
</audio>Part 2
</a>
<a onclick="this.firstChild.play()"><audio id="audio2" 
       preload="auto" 
       src="http://cld3097web.audiovideoweb.com/va90web25003/companions/Foundations%20of%20Rock/5.01.mp3#t60" >
</audio>Part 3
</a>

于 2022-02-14T11:26:29.593 回答
0

我没有测试过这段代码，但这应该可以工作：

<a id="audioTag1"><audio src="1.mp3"  ></audio>1</a>

var canPlay = false;
var audio = document.getElementsByTagName('audio')[0];

document.getElementById('audioTag1').addEventListener('click', function(){
    playAudio(15);
});

audio.addEventListener('canplay', function() { // listen for the `canplay`event, to make sure the file is loaded.
    canPlay = true; // Set a boolean to "true" once the audio has loaded.
});

function playAudio(time){
    audio.currentTime = time; // jump to 15 secs into the file
    audio.play(); // I'm not certain if this line is necessary.
}

确保在事件侦听器中运行 JS 代码onload，以便在执行代码时加载音频标签。

于 2013-01-23T13:12:48.033 回答