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

自从html5兴起，w3c便对外公布了大量的API，方便开发者使用，html5对富媒体提供了比较友好的支持，可以方便的制作音乐播放器或者视频播放器。

<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增加两个富媒体api：video、audio。本列主要应用了audio的音频api。

在页面中,增加音频属性的audio标签，用于播放音频，由于不同的浏览器支持不同的编码格式，本列采用基于Chrome浏览器的MP3格式的音频编码案列。

audio不仅支持音频播放，还提供一些强大的事件驱动API，列如：addTextTrack()可以向音频/视频添加新的文本轨道，canPlayType()检测浏览器是否能播放制定的音频/视频类型,具体API可以参考w3c.