javascript – 创建无缝的音频循环 – Web

我想创建一个音频文件的无缝循环.但到目前为止我使用的所有方法中,终点和结束之间存在明显的差距.开始.

这是我到目前为止所尝试的:

第一种方法是使用HTML中的音频并且循环但是从轨道的末尾开始到开始时仍然存在明显的延迟.

然后我用JavaScript尝试了相同的结果:

let myAudio = new Audio(file);
myAudio.loop = true; 
myAudio.play();

之后我尝试了这个(根据this answer)

myAudio.addEventListener(
    'timeupdate',function() {
        var buffer = .44;
        if (this.currentTime > this.duration - buffer) {
            this.currentTime = 0;
            this.play();
        }
     },false
);

我玩缓冲区但我只是为了缩小差距而不是完全放弃它.

我转向图书馆SeamlessLoop(GitHub)并让它在Chromium浏览器中无缝循环(但不是在最新的Safari中.没有在其他浏览器中测试).我用的代码:

let loop = new SeamlessLoop();
// My File is 58 Seconds long. Btw there aren't any gaps in the file.
loop.addUri(file,58000,'sound1');
loop.callback(soundsLoaded);
function soundsLoaded() {
    let n = 1;
    loop.start('sound' + n);
}

编辑:我尝试了另一种方法:通过两个不同的音频元素循环:

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();

    /*
        3104.897 is the length of the audio clip in milliseconds.
        Received from player.duration. 
        This is a different file than the first one
    */
    setTimeout(loopIt,3104.897); 
}

loopIt();

但是,由于浏览器中的毫秒数不够一致或不够精细,这不能很好地工作,但它确实比音频的正常“循环”属性好得多.

任何人都可以引导我走向正确的方向来无缝循环音频吗?

最佳答案
您可以改用Web Audio API.这有几点需要注意,但它可以让你准确地循环到单个样本级别.

需要注意的是,您必须将整个文件加载到内存中.对于大文件,这可能不实用.如果文件只有几秒钟,那么应该没有任何问题.

第二个是你必须手动编写控制按钮(如果需要),因为API有一个低级方法.这意味着播放,暂停/停止,静音,音量等.扫描和可能暂停可能是他们自己的挑战.

最后,不是所有的浏览器support Web Audio API – 在这种情况下你将不得不回退到常规的音频API甚至Flash,但如果你的目标是现代浏览器,这应该不是现在的主要问题.

这将加载一个4巴的鼓环,并在循环播放时没有任何间隙.主要步骤是:

>它从启用CORS的源加载音频(这很重要,要么使用与您的页面相同的域,要么设置外部服务器以允许跨域使用,如本例中Dropbox为我们所做的那样).
> AudioContext然后解码加载的文件
>解码文件用于源节点
>源节点连接到输出
>启用循环并从内存中播放缓冲区.

var actx = new (AudioContext || webkitAudioContext)(),src = "https://dl.dropboxusercontent.com/s/fdcf2lwsa748qav/drum44.wav",audioData,srcNode;  // global so we can access them from handlers

// Load some audio (CORS need to be allowed or we won't be able to decode the data)
fetch(src,{mode: "cors"}).then(function(resp) {return resp.arrayBuffer()}).then(decode);

// Decode the audio file,then start the show
function decode(buffer) {
  actx.decodeAudioData(buffer,playLoop);
}

// Sets up a new source node as needed as stopping will render current invalid
function playLoop(abuffer) {
  if (!audioData) audioData = abuffer;  // create a reference for control buttons
  srcNode = actx.createBufferSource();  // create audio source
  srcNode.buffer = abuffer;             // use decoded buffer
  srcNode.connect(actx.destination);    // create output
  srcNode.loop = true;                  // takes care of perfect looping
  srcNode.start();                      // play...
}

// Simple example control
document.querySelector("button").onclick = function() {
  if (srcNode) {
    srcNode.stop();
    srcNode = null;   
    this.innerText = "Play";
  } else {
    playLoop(audioData);
    this.innerText = "Stop";
  }
};

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)