欢迎来到[自学php网] ①群 287460651

主页 > 专题教程 > javascript > js代码片段 >

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

来源:未知    时间:2018-03-08 11:07 作者:小飞侠

[导读] html5音乐播放器mp3实现js代码片段 自从html5兴起,w3c便对外公布了大量的API,方便开发者使用,html5对富媒体提供了比较友好的支持,可以方便的制作音乐播放器或者视频播放器。 scrip...

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

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

image.png


<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.


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com