007_Buzz事件
1. 给音频添加一个或多个事件的监听函数。
sound.bind(event, callback)
group.bind(event, callback)
2. 给音频添加一个或多个事件的执行一次的监听函数。
sound.bindOnce(event, callback)
group.bindOnce(event, callback)
3. 解除绑定事件。
sound.unbind(event)
group.unbind(event)
4. 执行附加到事件的处理程序。请注意, 只触发函数, 而不触发本机事件。
sound.trigger(event)
group.trigger(event)
5. 事件列表
5.1. emptied事件: 媒体已经空了; 例如, 如果媒体已加载(也可以是部分加载)或者加载函数被调用, 则发送此事件。
5.2. timeupdate事件: 当前播放时间发生改变时调用。
5.3. volumechange事件: 音量发生改变时调用。例如: 设置音量或者静音属性改变。
5.4. loadstart事件: 开始加载音频文件时调用。
5.5. durationchange事件: 加载音频文件获取到播放时长或播放时长改变时调用。
5.6. loadedmetadata事件: 音频元数据加载完成时调用。
5.7. progress事件: 定期通知音频文件的下载进度。媒体文件已经下载的信息在缓存属性里。
5.8. suspend事件: 暂停加载媒体时发送; 这可能是因为下载已完成或由于任何其他原因暂停。
5.9. loadeddata事件: 媒体的第一帧已完成加载。
5.10. canplay事件: 当有足够的数据可以播放媒体时发送, 至少播放几帧。
5.11. canplaythrough事件: 表示可以不中断地播放整个媒体, 前提是下载速率至少保持在当前水平。
5.12. play事件: 播放媒体时调用。
5.13. playing事件: 媒体开始播放时调用。
5.14. pause事件: 当暂停播放时调用。
5.15. ended事件: 播放完成时调用。
5.16. ratechange事件: 播放速度发生改变时调用。
5.17. seeking事件: 寻址操作开始时调用(改变当前播放时间)。
5.18. waiting事件: 在另一个操作完成之前被延迟时调用(例如发生寻址操作会等待)。
5.19. seeked事件: 寻址操作完成时调用。
5.20. error事件: 当发生错误时调用。
5.21. sourceerror事件: 当源文件发生错误时调用。
5.22. dataunavailable事件: 当准备状态是数据不可用时调用。
5.23. empty事件: 当音频文件为空时调用。
6. 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Buzz事件</title>
<script type="text/javascript" src="buzz.js"></script>
</head>
<body>
<script type="text/javascript">
var menu = new buzz.sound("sounds/menu.mp3");
// menu.load();
menu.bind("canplay", function () {
console.log("canplay");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("canplaythrough", function () {
console.log("canplaythrough");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("dataunavailable", function () {
console.log("dataunavailable");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("durationchange", function () {
console.log("durationchange: " + this.getDuration());
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("emptied", function () {
console.log("emptied");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("empty", function () {
console.log("empty");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("ended", function () {
console.log("ended");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("error", function () {
console.log("error");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("sourceerror", function () {
console.log("sourceerror");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("loadeddata", function () {
console.log("loadeddata");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("loadedmetadata", function () {
console.log("loadedmetadata");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("loadstart", function () {
console.log("loadstart");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("pause", function () {
console.log("pause");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("play", function () {
console.log("play");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("playing", function () {
console.log("playing");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("progress", function () {
console.log("progress");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("ratechange", function () {
console.log("ratechange");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("seeked", function () {
console.log("seeked");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("seeking", function () {
console.log("seeking");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("suspend", function () {
console.log("suspend");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("timeupdate", function () {
console.log("timeupdate: " + this.getTime());
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("volumechange", function () {
console.log("volumechange: " + this.getVolume());
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
menu.bind("waiting", function () {
console.log("waiting");
for(let i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
});
function play(){
menu.play();
}
function pause(){
menu.pause();
}
function setVolume(){
var volume = Math.floor(Math.random() * 100);
menu.setVolume(volume);
}
function setSpeed(){
menu.setSpeed(2);
}
function setPercent(){
menu.setPercent(0);
}
function triggerWaitingEventFunction(){
menu.trigger("waiting");
}
</script>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="setVolume()">设置音量</button>
<button onclick="setSpeed()">设置播放速度</button>
<button onclick="setPercent()">以百分比设置播放时间位置</button>
<button onclick="triggerWaitingEventFunction()">触发执行等待事件的函数</button>
</body>
</html>