window.onload=function(){
// get autio element
var audio=document.getElementById("audio");
// play()
document.getElementById("play").onclick=function(){
audio.play();
console.log("play");
};
// pause()
document.getElementById("pause").onclick=function(){
audio.pause();
console.log("pause");
};
// get paused
document.getElementById("get_paused").onclick=function(){
console.log("audio.paused: "+audio.paused);
};
// get ended
document.getElementById("get_ended").onclick=function(){
console.log("audio.ended: "+audio.ended);
};
// set volume-
document.getElementById("volume_down").onclick=function(){
audio.volume-=0.2;
console.log("volume-0.2");
};
// set volume+
document.getElementById("volume_up").onclick=function(){
audio.volume+=0.2;
console.log("volume+0.2");
};
// get volume
document.getElementById("get_volume").onclick=function(){
console.log("audio.volume: "+audio.volume);
};
// get src
document.getElementById("get_src").onclick=function(){
console.log("audio.src: "+audio.src);
};
// set src_music1
document.getElementById("play_music1").onclick=function(){
audio.src="./media/music1.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music1");
};
// set src_music2
document.getElementById("play_music2").onclick=function(){
audio.src="./media/music2.mp3";
updateSrc();
updateCurrentSrc();
console.log("play music2");
};
// set remove_music
document.getElementById("remove_music").onclick=function(){
audio.src="";
console.log("remove music");
};
// get currentSrc
document.getElementById("get_current_src").onclick=function(){
console.log("audio.currentSrc: "+audio.currentSrc);
};
// get initialTime
document.getElementById("get_initial_time").onclick=function(){
console.log("audio.initialTime: "+audio.initialTime);
};
// get duration
document.getElementById("get_duration").onclick=function(){
console.log("audio.duration: "+audio.duration);
};
// get seeking
document.getElementById("get_seeking").onclick=function(){
console.log("audio.seeking: "+audio.seeking);
};
// set currentTime
document.getElementById("jump_to").onclick=function(){
audio.currentTime=30;
console.log("jumpTo 30s");
};
// get currentTime
document.getElementById("get_current_time").onclick=function(){
console.log("audio.currentTime: "+audio.currentTime);
};
// get played
document.getElementById("get_played").onclick=function(){
console.log("audio.played:");
var ranges=audio.played;
var n=ranges.length;
for(var i=0;i console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};
// autoplay on
document.getElementById("autoplay_on").onclick=function(){
audio.autoplay=true;
updateAutoplay();
console.log("autoplay on");
};
// autoplay off
document.getElementById("autoplay_off").onclick=function(){
audio.autoplay=false;
updateAutoplay();
console.log("autoplay off");
};
// get autoplay
document.getElementById("get_autoplay").onclick=function(){
console.log("audio.autoplay: "+audio.autoplay);
};
// controls show
document.getElementById("controls_show").onclick=function(){
audio.controls=true;
updateControls();
console.log("controls show");
};
// controls hide
document.getElementById("controls_hide").onclick=function(){
audio.controls=false;
updateControls();
console.log("controls hide");
};
// get controls
document.getElementById("get_controls").onclick=function(){
console.log("audio.controls: "+audio.controls);
};
// loop on
document.getElementById("loop_on").onclick=function(){
audio.loop=true;
updateLoop();
console.log("loop on");
};
// loop off
document.getElementById("loop_off").onclick=function(){
audio.loop=false;
updateLoop();
console.log("loop off");
};
// get loop
document.getElementById("get_loop").onclick=function(){
console.log("audio.loop: "+audio.loop);
};
// preload metadata
document.getElementById("preload_metadata").onclick=function(){
audio.preload="metadata";
updatePreload();
console.log("preload metadata");
};
// get preload
document.getElementById("get_preload").onclick=function(){
console.log("audio.preload: "+audio.preload);
};
// get defaultMuted
document.getElementById("get_default_muted").onclick=function(){
console.log("audio.defaultMuted: "+audio.defaultMuted);
};
// mute
document.getElementById("mute").onclick=function(){
audio.muted=true;
updateMuted();
console.log("audio mute");
};
// unmute
document.getElementById("unmute").onclick=function(){
audio.muted=false;
updateMuted();
console.log("audio unmute");
};
// get muted
document.getElementById("get_muted").onclick=function(){
console.log("audio.muted: "+audio.muted);
};
// get defaultPlaybackRate
document.getElementById("get_default_playback_rate").onclick=function(){
console.log("audio.defaultPlaybackRate: "+audio.defaultPlaybackRate);
};
// set playbackRate-
document.getElementById("playback_rate_down").onclick=function(){
audio.playbackRate-=0.2;
console.log("playbackRate-0.2");
};
// set playbackRate+
document.getElementById("playback_rate_up").onclick=function(){
audio.playbackRate+=0.2;
console.log("playbackRate+0.2");
};
// get playbackRate
document.getElementById("get_playback_rate").onclick=function(){
console.log("audio.playbackRate: "+audio.playbackRate);
};
// get networkState
document.getElementById("get_network_state").onclick=function(){
console.log("audio.networkState: "+audio.networkState);
};
// get readyState
document.getElementById("get_ready_state").onclick=function(){
console.log("audio.readyState: "+audio.readyState);
};
// get buffered
document.getElementById("get_buffered").onclick=function(){
console.log("audio.buffered:");
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};
// get seekable
document.getElementById("get_seekable").onclick=function(){
console.log("audio.seekable:");
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i console.log("("+ranges.start(i)+","+ranges.end(i)+")");
}
};

// DOM events

// abort
audio.addEventListener("abort",function(){
console.log("event:abort");
});
// canplay
audio.addEventListener("canplay",function(){
console.log("event:canplay");
});
// canplaythrough
audio.addEventListener("canplaythrough",function(){
console.log("event:canplaythrough");
});
// durationchange
audio.addEventListener("durationchange",function(){
updateDuration();
console.log("event:durationchange");
});
// emptied
audio.addEventListener("emptied",function(){
updateSrc();
updateCurrentSrc();
updateDuration();
updatePaused();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
console.log("event:emptied");
});
// ended
audio.addEventListener("ended",function(){
updateEnded();
console.log("event:ended");
});
// loadeddata
audio.addEventListener("loadeddata",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:loadeddata");
});
// loadedmetadata
audio.addEventListener("loadedmetadata",function(){
console.log("event:loadedmetadata");
});
// loadstart
audio.addEventListener("loadstart",function(){
console.log("event:loadstart");
});
// pause
audio.addEventListener("pause",function(){
updatePaused();
console.log("event:pause");
});
// play
audio.addEventListener("play",function(){
updatePaused();
console.log("event:play");
});
// playing
audio.addEventListener("playing",function(){
console.log("event:playing");
});
// progress
audio.addEventListener("progress",function(){
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
console.log("event:progress");
});
// ratechange
audio.addEventListener("ratechange",function(){
updatePlaybackRate();
console.log("event:ratechange");
});
// seeked
audio.addEventListener("seeked",function(){
console.log("event:seeked");
});
// seeking
audio.addEventListener("seeking",function(){
console.log("event:seeking");
});
// stalled
audio.addEventListener("stalled",function(){
console.log("event:stalled");
});
// suspend
audio.addEventListener("suspend",function(){
console.log("event:suspend");
});
// timeupdate
audio.addEventListener("timeupdate",function(){
updateCurrentTime();
updateEnded();
updatePlayed();
console.log("event:timeupdate");
});
// volumechange
audio.addEventListener("volumechange",function(){
updateVolume();
console.log("event:volumechange");
});
// waiting
audio.addEventListener("waiting",function(){
console.log("event:waiting");
});
updateAutoplay();
updateControls();
updateDefaultMuted();
updateDefaultPlaybackRate();
updateLoop();
updatePreload();
updateSrc();
updateCurrentSrc();
updateDuration();
updateCurrentTime();
updateVolume();
updatePaused();
updateMuted();
updateEnded();
updatePlaybackRate();
updateNetworkState();
updateReadyState();
updateBuffered();
updateSeekable();
updatePlayed();
updateError();
};
// functions to update info table
// autoplay
function updateAutoplay(){
document.getElementById("autoplay").innerHTML=audio.autoplay;
}
// controls
function updateControls(){
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：用HTML5制作一个简单的弹力球游戏HTML5 Canvas的事件处理介绍HTML5 audio标签使用js进行播放控制实例HTML5全屏(Fullscreen)API详细介绍

下一篇：html5实现完美兼容各大浏览器的播放器HTML5 video标签（播放器）学习笔记（二）:播放控制HTML5 video标签（播放器）学习笔记（一）:使用入门HTML5制作酷炫音频播放器插件图文教程html5中 media（播放器）的api使用指南html5 自定义播放器核心代码html5 音乐播放器 audio 标签使用概述HTML5 MiranaVideo播放器 (代码开源) 从零实现一个自定义html5播放器的示例代码