<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://www.haodehen.cn/did31555