当前位置：文江博客话题详情

无缝循环音频 html5

发布于 2024-12-03 10:42:33 字数 135 浏览 6 评论 0原文

有人知道如何实现音频标签的无缝循环吗？我正在考虑基于 javascript 的东西。

我有一个循环，比如 1 小节，我希望它循环并保持节奏。所以我需要循环平滑/无间隙。当我简单地将“循环”设置为 true 时，它会滞后并且不会保持节奏。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蝶舞 2024-12-10 10:42:33

虽然仍然不完美，但这对我有用：

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
    var buffer = .44
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0
        this.play()
    }
});

尝试缓冲区的大小以找到最适合您的方法

While still not perfect, this worked for me:

var audio_file = new Audio('whatever.mp3')
audio_file.addEventListener('timeupdate', function(){
    var buffer = .44
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0
        this.play()
    }
});

Experiment with the size of the buffer to find what works best for you

回复收藏 0 原文

梦魇绽荼蘼 2024-12-10 10:42:33

解决方案是有2个实例来控制播放。

类似这样：

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

如果您使用 SoundManager2，请通过数据 URI 而不是 URL 请求获取音频。

奇怪的是，我发现SoundManager2每次播放时都会向服务器请求文件。即使是从缓存加载，也会有延迟，直到收到音频文件的未修改标头。

Solution is to have 2 instances to control the play back.

Something like this :

var current_player = "a";
var player_a = document.createElement("audio");
var player_b = document.createElement("audio");

player_a.src = "sounds/back_music.ogg";
player_b.src = player_a.src;

function loopIt(){
    var player = null;

    if(current_player == "a"){
        player = player_b;
        current_player = "b";
    }
    else{
        player = player_a;
        current_player = "a";
    }

    player.play();

    setTimeout(loopIt, 5333); //5333 is the length of the audio clip in milliseconds.
}

loopIt();

And if you're using SoundManager2, source the audio through a Data URI instead of an URL request.

Strangely, I found that SoundManager2 request the file from the server each time it plays. Even it's loading from the cache, there will be a delay until the not-modified header is received for the audio file.

回复收藏 0 原文

波浪屿的海角声 2024-12-10 10:42:33

不幸的是，这是 HTML5 元素的弱点之一。无法保证音频会在您需要时或无延迟地播放。

有两个选项值得研究：

SoundManager2 - 一个很棒的库，可能会尽管在本例中它将使用 Flash 来播放音频，但这里会有所帮助；
Chrome 中的
Web Audio API 或 Firefox 中的音频数据 API - 两者都是非常新的，尚未真正准备好迎接黄金时段，但允许您做一些事情比如预定的音频播放、循环等等。

回复收藏 0 原文

鸠书 2024-12-10 10:42:33

是的，这真是一个痛苦......显然，指定该元素的人既不是音乐家也不是游戏开发者 - 呵呵。

无论如何，根据您正在做的事情，另一种可能的解决方法是创建一个 MP3/OGG/wav，它是您的循环的多次重复。当您只想在停止播放之前将声音循环几次时，这会很方便。

一个例子可能是玩家推进火箭飞船。我目前正在开发一个游戏，就是这个场景，并创建了一个带有多个循环的推力音效的 MP3，总共播放大约 6 秒。为了最大限度地减少下载的大小，我将音频编码为 32kbps - 任何更低的速度听起来都会令人难以接受，因为推力声主要是白噪声。

正如您所猜到的，我只是假设玩家不太可能连续推进 6 秒。如果他们这样做，他们会听到差距，但我可以忍受。大多数时候，他们不会用力推那么久，所以不会听到故障。

我考虑过的另一个选择是一对淡入和淡出的样本，并且两者都带有偏移量循环。

虽然这些适用于某些游戏场景，但它们几乎肯定不适用于任何类型的音乐场景。 YMMV。

回复收藏 0 原文

以酷 2024-12-10 10:42:33

我已经尝试了上述方法但没有成功，在我的用例（使用 Firefox 43.0）中似乎都点击了。这部分是由于必须循环一个连续的音调，其中没有方便的中断或低点（我正在尝试使用 22010 个样本/秒的单声道 .wav 文件创建一个旋转的汽车引擎）。

但是，我可以将我的 .wav 文件多次连接在一起，生成一个长的 .wav 文件，该文件中没有任何点击（除了现在在最后仍然出现的罕见点击），这是因为我的原始 .wav 文件是精心设计的循环。

我现在计划让几个这样的长文件同时连续播放（每个汽车转速级别一个）并使用增益节点混合这些信号（此处描述：http://www.html5rocks.com/en/tutorials/webaudio/intro/）。这应该会产生一个无点击的汽车引擎，其听起来比简单地启动和停止单个 .wav 文件的播放要好得多。

回复收藏 0 原文