使用HTMLMediaElement向后播放音频
Playing audio backwards with HTMLMediaElement
我试图在chrome中成功加载和播放音频文件,但无法向后播放:
audio = new Audio('http://mathweirdo.com/bingo/audio/buzzer.mp3');
audio.playbackRate = -1;
audio.currentTime = audio.duration; // I have tried ommiting this line
audio.play()
这不会产生任何声音,只会触发一个timeupdate
事件。
当前不支持使用负值,因此必须手动加载和反转缓冲区。
请注意,这将需要启用CORS的音频源(示例中的音频源没有,所以我无法设置现场演示)。这里有一种方法:
- 通过AJAX加载数据(这需要为音频文件启用CORS)
- 让浏览器将缓冲区解析为音频缓冲区
- 获取通道缓冲区(引用)
- 反转缓冲区
- 初始化音频缓冲区并播放
这当然会限制你的一些,因为你不能再使用音频元素了。您必须通过手动添加控件和代码来支持所需的功能。
// load audio as a raw array buffer:
fetch("http://mathweirdo.com/bingo/audio/buzzer.mp3", process);
// then process the buffer using decoder
function process(file) {
var actx = new (window.AudioContext || window.webkitAudioContext);
actx.decodeAudioData(file, function(buffer) {
var src = actx.createBufferSource(), // enable using loaded data as source
channel, tmp, i, t = 0, len, len2;
// reverse channels
while(t < buffer.numberOfChannels) { // iterate each channel
channel = buffer.getChannelData(t++); // get reference to a channel
len = channel.length - 1; // end of buffer
len2 = len >>> 1; // center of buffer (integer)
for(i = 0; i < len2; i++) { // loop to center
tmp = channel[len - i]; // from end -> tmp
channel[len - i] = channel[i]; // end = from beginning
channel[i] = tmp; // tmp -> beginning
}
}
// play
src.buffer = buffer;
src.connect(actx.destination);
if (!src.start) src.start = src.noteOn;
src.start(0);
},
function() {alert("Could not decode audio!")}
)
}
// ajax loader
function fetch(url, callback) {
var xhr = new XMLHttpRequest();
try {
xhr.open("GET", url);
xhr.responseType = "arraybuffer";
xhr.onerror = function() {alert("Network error")};
xhr.onload = function() {
if (xhr.status === 200) callback(xhr.response);
else alert(xhr.statusText);
};
xhr.send();
} catch (err) {alert(err.message)}
}
相关文章:
- 使用HTMLMediaElement向后播放音频
- 播放音频时创建一个跳动的圆圈
- Javascript播放音频后其他没有音频崩溃
- 在播放完成之前再次单击播放音频文件
- 延迟后播放音频标签
- 如何使用Flash CC画布项目在iPad上播放音频
- 使用javascript播放音频(没有HTML5或可见播放器)
- 如何使用Bootstrap和Heroku为Rails应用程序添加隐藏的播放音频
- 检测iOS移动设备的JavaScript比自动播放音频
- 在手机和平板电脑浏览器上播放音频片段
- 需要帮助修复我的javascript"对于循环“;播放音频播放列表
- 自动播放音频播放列表SoundManager2 bar ui
- 单击链接时播放音频剪辑
- 使用 Redux 播放音频文件
- 在 iPad 上延迟后正在播放音频
- 关闭后,引导模式弹出窗口上的视频继续播放音频
- 无法更改用于播放音频的变量
- 我在 html5 音频标签中播放音频时收到 [对象媒体错误]
- 无法使用谷歌应用引擎播放音频.它在本地工作
- 在 javascript 数组中播放音频文件时遇到问题