<script>
window.onload = function(){
var playerMp3 = function(mp3){
var playerMp3 = function(option){
this.audio = option.audio;
this.audioAction = option.audioAction;
this.process = ooption.process;
this.setProcess = option.setProcess;
this.setProcessOK = option.setProcessOK;
this.volup = option.volup;
this.voldown = option.voldown;
this.muted = option.muted;
var self = this;
this.audioAction.onclick = function(){
if(this.value == '播放'){
self.start();
this.value = "暂停";
}else{
self.pause();
this.value = "播放";
}
}
this.volup.onclick = function(){
self.setVolup();
}
this.voldown.onclick = function(){
self.setVoldown();
}
this.muted.onclick = function(){
self.setMute();
}
setInterval(function(){
self.getProcess();
},1000);
this.setProcessOK.onclick = function(){
self.setProcess();
}
}
playerMp3.prototype.start = function(){
this.audio.play();
}
playerMp3.prototype.pause = function(){
this.audio.pause();
}
player.Mp3.prototype.getProcess = function(){
this.process.value = Math.floor(this.audio.currentTime)+"秒";
}
pkayerMp3.prototype.setProcess = function(){
this.audio.currentTime = (this.setProcessO.value || 0);
}
playerMp3.prototype.setVolup = function(){
var v = this.audio.volume + 0.1;
this.audio.volume = (v>1 ?1:v);
}
playerMp3.prototype.setVoldown = function(){
var v = this.audio.volume -0.1;
this.audio.volume = (v<0?0:v);
}
playerMp3.prototype.setMute = function(){
this.audio.muted = !this.audio.muted;
this.audio.muted ? (this.muted.value = "发声"):(this.muted.value="静音");
}
return new playerMp3(mp3);
}
playerMp3({
"audio":document.getElementById("audio"),
"audioAction":document.getElementById("audioAction"),
"process":document.getElementById("process"),
"setProcess":document.getElementById("setProcess"),
"setProcessOK":document.getElementById("setProcessOK"),
"volup":document.getElementById("volup"),
"voldown":document.getElementById("voldown"),
"muted":document.getElementById("muted")
})
};
</script>
html代码:
<div>
<h2>html5音频播放器mp3代码</h2>
</div>
<style>
auido{display: none;}
</style>
<div>
<div>正在播放MP3文件:stubbomDream.mp3</div>
<div><input id="audioAction" type="button" value="播放"></div>
<div>进度:<input id="process" value="0"></div>
<div>
修改进度:
<input type="text" value="0" id="setProcess">
<input type="button" value="确定" id="setProcessOK">
</div>
<div>
<input type="button" id="volup" value="音量+">
<input type="button" id="voldown" value="音量-">
<input type="button" id="muted" value="静音">
</div>
</div>
<audio id="audio" src="stubbomDream.mp3" controls="controls" ></audio>
查看更多关于html5音乐播放器mp3实现js代码片段的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did31555