如何在 howler.js 上链接声音答案

【问题标题】：How to chain sounds on howler.js如何在 howler.js 上链接声音
【发布时间】：2014-09-29 17:25:54
【问题描述】：

我需要在 howler.js 中播放一些声音，问题是我不知道如何链接它。

例如，在字符串 BCG

需要先玩 b.ogg，然后是 c.ogg，最后是 g.ogg

如果我只是使用（加载后）：

sound.play('b');
sound.play('c');
sound.play('g');

所有这些都开始并重叠，这不是我需要的。

我看到有一个 onend 属性，但是不知道如何正确使用它。

问候。

【问题讨论】：

标签： javascript howler.js

【解决方案1】：

这是我的简单解决方案，我使用的是小文件，所以下载延迟不是问题。在这种情况下声音是全局的

function play_audio(file_names) {
    sound = new Howl({
        src: [audio_url+file_names[0]],
        volume: 0.5,
        onend: function() {
            file_names.shift();
            if (file_names.length > 0) {
                play_audio(file_names);
            }
        }
    });      
    sound.play();
}

【讨论】：

你玩什么 play_audio(file_names);可以分享一下代码吗？
文件名是 mp3 文件的列表 var sound_test = [ 'siren.mp3', 'test.mp3'];所以我称之为 play_audio(sound_test);
这样做时有没有办法预加载音频文件？由于预加载仅在定义新的嚎叫时发生，如果它只加载第一首曲目的“onend”，则在下一首曲目播放之前可能会有延迟。

【解决方案2】：

您可以使用不需要精灵的代码（jsfiddle，Github issue）：

var playlist = function(e) {
    // initialisation:
      pCount = 0;
      playlistUrls = [
        "https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg",
        "https://upload.wikimedia.org/wikipedia/commons/8/8a/Zh-Beijing.ogg",
        "./audio/a.mp3",
        "./audio/b.mp3",
        "./audio/c.mp3",
        "./audio/d.mp3"
        ], // audio list
      howlerBank = [],
      loop = true;

    // playing i+1 audio (= chaining audio files)
    var onEnd = function(e) {
      if (loop === true ) { pCount = (pCount + 1 !== howlerBank.length)? pCount + 1 : 0; }
      else { pCount = pCount + 1; }
      howlerBank[pCount].play();
    };

    // build up howlerBank:     
    playlistUrls.forEach(function(current, i) {   
      howlerBank.push(new Howl({ urls: [playlistUrls[i]], onend: onEnd, buffer: true }))
    });

    // initiate the whole :
        howlerBank[0].play();
}

如果你愿意，请分享你的变化。

【讨论】：

【解决方案3】：

您可以创建一个函数playString(yourString)，它将读取每个字符并动态设置您的声音的onend 属性。下面的例子应该播放B C G A C：

var sound = new Howl({
    urls: ['http://shrt.tf/abcdefg.mp3'],
    volume: 1,
    sprite: {
        a: [0, 600],
        b: [700, 500],
        c: [1200, 600],
        d: [1900, 500],
        e: [2400, 500],
        f: [2900, 500],
        g: [3400, 500],
    }
});

Howl.prototype.playString = function(str){
    if(str.length>1){
        this._onend[0] = function(){this.playString(str.substring(1,str.length));};
    } else {
        this._onend[0] = function(){};
    }
    if(str.length>0){
        this.play(str.substring(0,1));
    }
};

sound.playString('bcgac');

&lt;script src="http://shrt.tf/howler.js"&gt;&lt;/script&gt;

请注意，您还可以调整此函数以在角色不在角色中时工作，或者使用名称数组而不是字符串。

【讨论】：

非常感谢，想弄清楚这一点真的很糟糕。
blex，你在哪里托管了给你链接的文件shrt.tf/abcdefg.mp3 我一直在寻找类似的东西，以便我可以测试健全的 javascript 编程。
嗨@ChristopherGaston，这是我的个人测试服务器。如果您不想购买，您可以轻松地在您的计算机上安装本地服务器，使用适用于 Windows 的 WAMP 或适用于 Mac 的 MAMP。然后，您将能够通过ˋhttp://localhost/your_files` 访问您的文件。