使用Howler.js实现音频播放淡入淡出实例页面

回到相关文章 »

效果：

代码：

HTML代码：

<button id="button">点击播放</button>

JS代码：

const url = './htmlbook.wav';

const sound = new Howl({
    src: [url]
});

// 点击按钮，音频淡入淡出播放
button.onclick = function () {
    sound.play();
    sound.fade(0, 1, 1000);
    setTimeout(() => {
        sound.fade(1, 0, 1000);
    }, sound.duration() * 1000 - 1500);
}