网站首页 » 前端开发 » HTML5 » 基于HTML5 Audio 开发音乐播放器
上一篇:
下一篇:

基于HTML5 Audio 开发音乐播放器

因为HTML5 新增了一些很方便的特性,所以HTML5  在前端圈里越来越受到大家的关注,下面就给大家分享一个基本HTML5 audio 属性开发的一个简单的音乐播放器。

HTML5 audio 实例

HTML 代码

<audio id="myMusic" src="./yellow.mp3"></audio>
<div class="music-player-box">
    <div class="music-info">
        <span id="current-time">00:00</span>
        <span id="duration">00:00</span>
    </div>
    <div class="music-progress" id="music-progress">
         <span class="music-progress-run" id="music-progress-run"></span>
    </div>
    <div class="btn-wrap"><button type="button" class="status-control" id="status-control">播放/暂停</button></div>
</div>

CSS 代码

.music-player-box{
    margin: 50px auto;
    width: 600px;
    background: #eee;
    padding: 18px;
}
.music-info{
    display: flex;
    justify-content: space-between;
}
.music-info span{
    display: flex;
}
.music-progress{
    position: relative;
    margin-top: 5px;
    height: 5px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    cursor: pointer;
}
.music-progress-run{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #428bca;
    height: 5px;
}
.btn-wrap{
    text-align: right;
}
.status-control{
    cursor: pointer;
    margin-top: 5px;
}

JavaScript 代码

// 创建一个PLAYER
function myPlayer(){
    this.audio = document.getElementById("myMusic");
    this.btn = document.getElementById("status-control");
    this.musicProgress = document.getElementById("music-progress");
    this.musicProgressRun = document.getElementById("music-progress-run");
    this.musicProgressW = this.musicProgress.offsetWidth;
    this.progressBl = null;
    this.timer = null;
    this.btn.status = false;
}

// 获取音频时长
myPlayer.prototype.getDuration = function(_audio){
   return _audio.duration;
}

// 获取音频当前时间
myPlayer.prototype.getCurrentTime = function(_audio){
    return _audio.currentTime;
}

// 设置音频当前时间
myPlayer.prototype.setCurrentTime = function(_value){
    myPlayer.audio.currentTime  = _value;
}

myPlayer.prototype.timeFormat = function(_time,_timeContainer){
    var timeContainer = document.getElementById(_timeContainer);
    var minutes = parseInt(_time/60);
    if(minutes<10){
        minutes = "0" + minutes;
    }
    seconds = parseInt(_time%60);

    if(seconds<10){
        seconds = "0" + seconds;
    }
    fCurrentTime = minutes + ":" + seconds
    timeContainer.innerHTML = fCurrentTime;
}

// 播放
myPlayer.prototype.play = function(_audio){
    _audio.play();
}

// 暂停
myPlayer.prototype.pause = function(_audio){
    _audio.pause();
}

// 暂停-播放切换
myPlayer.prototype.statusAction = function(status_btn){
    if(status_btn.status == false){
        myPlayer.play(myPlayer.audio);
        status_btn.status = true;
        myPlayer.timer = setInterval(function(){
            myPlayer.timeFormat(myPlayer.getCurrentTime(myPlayer.audio),"current-time");
            myPlayer.progress();
        },1000);
    }else{
        myPlayer.pause(myPlayer.audio);
        status_btn.status = false;
        clearInterval(myPlayer.timer);
    }
}

myPlayer.prototype.progress = function(){
    myPlayer.musicProgressRun.style.width = myPlayer.progressBl * myPlayer.getCurrentTime(myPlayer.audio) + "px";
    if(myPlayer.audio.ended){
        myPlayer.musicProgressRun.style.width = 0;
        myPlayer.setCurrentTime(0);
        myPlayer.timeFormat(0,"current-time");
        myPlayer.btn.status = false;
        clearInterval(myPlayer.timer);
    }
    myPlayer.musicProgress.onclick = function (event){
        var progressLen = myPlayer.getMouseActive(event).x - myPlayer.musicProgress.offsetLeft;
        myPlayer.musicProgressRun.style.width = progressLen + "px";
        myPlayer.setCurrentTime(myPlayer.getDuration(myPlayer.audio)/myPlayer.musicProgressW * progressLen);
        myPlayer.timeFormat(myPlayer.getDuration(myPlayer.audio)/myPlayer.musicProgressW * progressLen,"current-time");
    }

}

myPlayer.prototype.getMouseActive = function(event){
    var event = event || window.event;
    return{"x":event.clientX}
}

myPlayer = new myPlayer();
myPlayer.audio.addEventListener("loadeddata",function(){
    myPlayer.timeFormat(myPlayer.getDuration(myPlayer.audio),"duration");
    myPlayer.progressBl = myPlayer.musicProgressW/myPlayer.audio.duration;
    myPlayer.progress();
}, false);

myPlayer.btn.onclick = function(){
    myPlayer.statusAction(this);
}

这是一个功能比较简单的HMTL5 音乐播放器。有进度条,并且进度条可以点击,有播放暂停按钮。音乐播放完后进度条自动归零,并且停止播放音乐。虽然功能简单了点,代码也不多,但也可以满足你平时学习之用了。下面就简单地列出本实例中用到的属性,方法,事件。

HTML5 audio 基本属性

下面我们来看看HTML5 audio 的一些基本属性

controlscontrols则向用户显示控件,比如播放按钮,音量控制,进度条

属性 描述
src url 音频的 URL
autoplay autoplay 音频就绪后马上播放
loop loop 每当音频结束时重新开始播放
preload preload 音频在页面加载时进行加载,并预备播放

HTML5 audio 方法

方法名 定义和用法
play() 开始播放音频。
pause() 暂停当前播放的音频。

HTML5 audio 事件

事件名 定义和用法
loadeddata 当当前帧的数据已加载,但没有足够的数据来播放指定音频/视频的下一帧时,会发生 loadeddata 事件。

如果想查看更多关于audio 的属性,方法,事件的可以看看这篇文章,我已经帮你整理好了,传送门:HTML5 Audio 对象(属性、方法、事件)

看它千万篇,不如自己动手操作一篇,开始吧!

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/a-music-player-base-on-html5-audio/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END