OOP寫HTML5中的mp3 player

看到有人這麼寫: 把一些audio的API的封裝, 再將這些API和UI結合, 可以產生一些基本的播放事件的需求, 順便了解如何使用OOP寫出來:

完整code如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>9-7 HTML5版JavaScript實作的MP3播放器</title>
<style>
audio {
display: none;
}
</style>
</head>
<body>
<div><h2>HTML5版JavaScript實作的MP3播放器</h2></div>
<div>
<div>正在播放mp3檔: lovestory.mp3</div>
<div><input id="audioAction" type="button" value="播放"></div>
<div>進度: <input id="process" value="0"></div>
<div>
修改進度:
<input id="setProcess" type="text" value="0">
<input id="setProcessOK" type="button" value="確定">
</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="../lovestory.mp3" controls="controls"></audio>
<script type="text/javascript">
    window.onload = function(){

        var playerMp3 = function(mp3){
            var playerMp3 = function(option){//mp3 player

                this.audio = option.audio;
                this.audioAction = option.audioAction;
                this.process = option.process;
                this.setProcessO = 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();
            }

            playerMp3.prototype.getProcess = function(){
                this.process.value = Math.floor(this.audio.currentTime) + "秒";
            }

            playerMp3.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 = "靜音");

            }

            //產生實體mp3 player
            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>
</body>
</html>



留言

張貼留言

熱門文章