结构Howler.js脚本的回放就像这个SoundManager2示例代码一样?

时间:2018-01-21 13:11:01

标签: javascript html5-audio howler.js

In this question 你可以找到音频播放的SoundManager2和Howler.js代码示例。

我基本上使用该页面中的SoundManager2脚本 - 只需进行一些修改,如下面的代码片段所示。

在我的HTML5浏览器应用程序中,我可以使用此脚本通过调用声音id(“Song1”)和函数(例如“playAudio”)来播放声音。

我的问题:
如何构建Howler.js脚本以获得相同的功能
 →通过调用声音ID和正确的功能来播放声音?

Howler.js Documentation

    <!DOCTYPE html>
    <script type="text/javascript" src="api/soundmanager2.js"></script>
    <script>
        soundManager.setup({
    	url: 'api/',
    	onready: function() {

    soundManager.createSound({
        id: 'Song1',
    		url: 'audio/Song1.ogg'
        });
      },
    });
    function playAudio(snd) {
        soundManager.play(snd);
    }
    function stopAudio(snd) {
        soundManager.stop(snd);
    }
    </script>

1 个答案:

答案 0 :(得分:1)

Howler.js是一个简单的API,因此它没有内置的这个功能,但只需创建一个带有对象的地图就足够了:

&#13;
&#13;
var Song1 = new Howl({
  src: 'audio/Song1.ogg'
});
var Song2 = new Howl({
  src: 'audio/Song2.ogg'
});

var sounds = {
  Song1: Song1,
  Song2: Song2,
};

function playAudio(snd) {
  sounds[snd].play();
}

function stopAudio(snd) {
  sounds[snd].stop();
}
&#13;
&#13;
&#13;