好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5音乐播放器mp3实现js代码片段

<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代码片段的详细内容...

  阅读:84次