html5 audio 获取播放时间,html5 – 在Web Audio API中使用playbackRate.value时如何获取当前时间...

这篇博客探讨了在JavaScript中使用Web Audio API时遇到的挑战,即如何在动态改变音频源`playbackRate`属性后,准确获取音频的当前播放位置。作者通过加载和播放MP3文件的示例代码说明,当改变播放速率以实现音轨同步时,`context.currentTime`不再反映实际的播放位置。寻求解决方案来跟踪音频在改变播放速度后的实际进度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我需要知道正在播放的源的当前时间,但我不能使用context.currentTime,因为当我更改source.playbackRate.value时,上下文的速度也不会改变,所以我不能确定声音的当前位置在哪里.没有别的办法吗?

编辑,一些代码:

我使用这个函数从网络加载和播放mp3

function loadSoundFile(url) {

source = null;

var request = new XMLHttpRequest();

request.open('GET', url, true);

request.responseType = 'arraybuffer';

request.onload = function(e) {

context.decodeAudioData(request.response, initSound, function() {

alert("error");

});

};

request.send();

}

var source = null;

var inittime = 0;

function initSound(buffer)

{

source = context.createBufferSource();

source.buffer = buffer;

source.connect(context.destination);

source.start(0);

inittime = context.currentTime; //I save the initial time

}

然后要获得音轨的实际位置,我应该这样做:

var current_position = context.currentTime-inittime;

这工作正常,而我不在源中更改playbackRate:

source.playbackRate.value

我需要动态更改此值以将音频轨道与正在播放的另一个音轨同步,因此如果轨道的实际位置低于从“服务器”接收的位置,则需要加速,否则减慢速度更高.但是,如果我改变播放率,我怎么知道音轨的位置当前在哪里?

事实上现在如果我使用

var current_position = context.currentTime-inittime;

current_position将是从播放开始所花费的时间,该时间与播放的当前时间位置不同,更改播放值.

好的,以下是html视频声音控制的代码: ```html <!DOCTYPE html> <html> <head> <title>视频声音控制</title> </head> <body> <!-- 视频 --> <video id="myVideo" width="640" height="360" controls> <source src="myVideo.mp4" type="video/mp4"> <source src="myVideo.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <!-- 音量控制 --> <input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1" onchange="changeVolume()"> <!-- 播放/暂停按钮 --> <button onclick="playPause()">播放/暂停</button> <!-- 停止按钮 --> <button onclick="stop()">停止</button> <!-- 快进按钮 --> <button onclick="fastForward()">快进</button> <!-- 慢放按钮 --> <button onclick="slowMotion()">慢放</button> <script> var myVideo = document.getElementById("myVideo"); var volumeRange = document.getElementById("volumeRange"); function changeVolume() { myVideo.volume = volumeRange.value; } function playPause() { if (myVideo.paused) { myVideo.play(); } else { myVideo.pause(); } } function stop() { myVideo.pause(); myVideo.currentTime = 0; } function fastForward() { myVideo.currentTime += 5; } function slowMotion() { myVideo.playbackRate = 0.5; } </script> </body> </html> ``` 在上面的代码中,我们使用了`<video>`标签来嵌入视频,并添加了`controls`属性来添加视频控制面板。我们还使用了`<input>`标签来创建音量控制条,并使用`onchange`属性来调用`changeVolume()`函数。我们还添加了几个按钮,每个按钮都有一个相应的JavaScript函数来控制视频的播放,暂停,停止,快进和慢放。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值