【问题标题】:Load audio from local memory and play sprites从本地内存加载音频并播放精灵
【发布时间】:2015-08-28 08:50:18
【问题描述】:
我不是专家,所以请耐心等待。
我想知道如何从文件中加载音频并播放精灵。
这是伪代码,希望能帮助你理解:
- 询问音频的路径
- 以毫秒为单位写入 timeA(程序必须开始播放时)
- 以毫秒为单位写入 timeB(当程序必须停止播放时)
- 从时间 A 到时间 B 播放 Sprite
我正在使用这个库https://github.com/goldfire/howler.js。有没有办法用这个自动创建精灵?
请帮帮我!提前谢谢你。
我知道发布一些代码会更好,但我真的不知道从哪里开始。
【问题讨论】:
标签:
javascript
html
html5-audio
howler.js
【解决方案1】:
如果我理解正确,您想加载一个声音文件并从一个给定位置播放它的一部分到第二个给定位置。
因此,获取您的时间戳并构建精灵,如下所示。为了您的方便,我添加了更多代码。如果您知道声音文件的持续时间,那么之前计算时间戳会很容易,但从持续时间未知的文件末尾计算时间戳也可能很有趣。因此,您必须加载文件,然后才能获得持续时间(请参阅“onload”中的部分)
<html>
<head>
<script src="howler.min.js"></script>
</head>
<body>
<button id="buttonBefore">Loading...</button>
<button id="buttonToPlay">Loading...</button>
<button id="buttonAfter">Loading...</button>
<button id="buttonLastSecond">Loading...</button>
<script>
var timeA = 100;
var timeB = 200;
var soundFile = new Howl({
urls: ['./sound.mp3'],
onload: function () {
document.getElementById('buttonBefore').onclick = function () {
soundFile.play('before')
}
document.getElementById('buttonBefore').firstChild.data = "Play before";
document.getElementById('buttonToPlay').onclick = function () {
soundFile.play('toplay')
}
document.getElementById('buttonToPlay').firstChild.data = "Play toplay";
document.getElementById('buttonAfter').onclick = function () {
soundFile.play('after')
}
document.getElementById('buttonAfter').firstChild.data = "Play after";
document.getElementById('buttonLastSecond').onclick = function () {
soundFile.play('lastSecond')
}
document.getElementById('buttonLastSecond').firstChild.data = "Play lastSecond";
soundFile.sprite({
"before": [0, timeA - 1],
"toplay": [timeA, timeB],
"after": [timeB + 1, soundFile._duration * 1000],
"lastSecond": [soundFile._duration * 1000 - 1000, soundFile._duration * 1000 - 1],
});
}
});
</script>
</body>
</html>