美文网首页
简易播放器

简易播放器

作者: f1a94e9a1ea7 | 来源:发表于2018-11-10 23:23 被阅读0次

    项目里需要一个播放功能,样式如下:


    demo样式

    而 html <audio> 元素加上 control 属性后的播放器样式是这样的:


    原生audio元素样式

    思路:

    原生样式不能改变,所以需要自己写出 demo 样式,然后点击 demo 的暂停和播放键时,捕获 audio 对象,控制它的播放和暂停事件。
    注:audio相关事件
    audio属性

    步骤:

    1. 按钮被点击后,判断当前音频是否在暂停状态:
    if(audio.paused)
    

    如果是,就播放:

    audio.play()
    

    反之则暂停:

    audio.pause()
    
    1. 在播放状态需要每秒改变音乐剩余播放时间,则需要定时器每秒让时间减去一秒:
    this.opreate = setInterval( function() {
                
                    }, 1000)
    
    1. 当为暂停状态时清除计时器:
    window.clearInterval(this.opreate)
    

    大体思路就是这样,还有几个细节:播放时时间到0的时候也要清除定时器,然后停止播放;audio.duration 得到的音频总时长有小数点需要化整;暂停时右上角的时间也要定格为当前暂停的时间。
    demo地址
    源码地址

    相关文章

      网友评论

          本文标题:简易播放器

          本文链接:https://www.haomeiwen.com/subject/nbzzxqtx.html