音频播放控件

Word count: 3.1k   |   Reading time≈ 18 min

页面audio.html

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../js/jquery.js"></script>
    <script src="../js/flexible.debug.js"></script>
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no">
    <title>济公全传-奇文小说</title>
    <!-- 播放器样式 -->
    <link rel="stylesheet" type="text/css" href="../css/audio.css">
    <!-- 页面样式，按设计稿 -->
    <link rel="stylesheet" href="../css/style.css">


</head>

<body>
    <!-- 磨砂背景 -->
    <!-- <div class="blur">
            <img src="../../Image/2.jpg" alt="">
        </div> -->
    <!--fixLayer  -->
    <div class="audiosWrap fixLayer">
        <div class="header wHeadBg pageHead">
            <div class="head-left"><a class="back" href="#"><img src="../img/back.png" alt=""></a></div>
            <!-- <div class="head-left"><a class="back" href="#"><img src="../img/backW.png" alt=""></a></div> -->
            <div class="head-middle">
                <p>尤物小妻潜上瘾</p>
            </div>
            <!-- <div class="head-right">
                <p class="headRightBox">
                    <a class="menu" href="javascript:;"></a>
                </p>
            </div> -->
        </div>
        <!-- 标题 -->
        <div class="cdText">
            <p>尤物小妻潜上瘾</p>
        </div>
        <!-- 封面 -->
        <div class="cdBox">
            <div class="coverBox">
                <img class="coverImage" src="../img/1.jpg">
            </div>
        </div>
        <!-- 播放器控制面板 -->
        <div class="controlBox">
            <div id="playContent">

                <div onclick="myControl.selectTime(event)" id="progressWrap">
                    <div id="progress" style="display: block;"></div>
                    <div class="timeBox">
                        <span id="currentTime">00:00</span>
                        <span id="totleTime">12:30</span>
                    </div>
                </div>

            </div>

            <ul>
                <li class="small">
                    <a id="prevButton" class="prev gray"
                        href="./listening.html?url=http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz002.mp3"></a>
                </li>
                <li class="playbg">
                    <a id="playButton" onclick="myControl.mainControl()" class="play"></a>
                </li>
                <li class="small">
                    <a id="nextButton" class="next"
                        href="http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz003.mp3"></a>
                </li>
            </ul>

            <ol>
                <li class="collect noCollected">
                    <a href="javascript:;"><i></i><span>收藏</span></a>
                </li>
                <li id="playSpeed" class="speed">
                    <a href="javascript:;"><i></i><span>1倍数</span></a>
                </li>
                <li class="directory">
                    <a
                        href="../../HTML/page/listening-moreList.html?url=http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz003.mp3"><i></i><span>目录</span></a>
                </li>
            </ol>

            <audio id="myMusic">
                <!-- <source src="http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz001.mp3" type="audio/ogg">
                <source src="http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz001.mp3" type="audio/mpeg">
            -->
            </audio>
        </div>

    </div>

    <!-- 固定悬浮窗 -->
    <div class="fixAudio">
        <p>5</p><img src="../../Image/1.jpg" alt="">
    </div>
</body>
<!-- 
    音频
 -->
<script src="../js/jquery.cookie.js"></script>
<script src="../js/audiospage.js"></script>
<script src="../js/audios.js"></script>

<script>
    // 自动播放
    var myControl = new Control({
        currentSrc: 'http://file.huaxiazi.com/mp3/%E6%B5%8E%E5%85%AC%E5%85%A8%E4%BC%A0/jgqz001.mp3',
        callback: function() {
            console.log('执行事件')
        }
    })
    myControl.initAutoPlay()

    // 点击播放
    // $('#test').click(function(){
    //     myControl.mainControl()
    // })
</script>

</html>

audio.js

js

//播放器控制面板    
var Control = function (o) {
    let that = this
    var setting = {
        audio: $("#myMusic")[0], //播放器
        progressWrap: $("#progressWrap"), //歌曲进度条容器
        progress: $("#progress"),     //歌曲进度条
        playBtn: $("#playButton"),   //主控按钮
        allTimeNode: $("#totleTime"),    //总时间容器
        currentTimeNode: $("#currentTime"),   //当前时间容器
    }
    this._opation = $.extend({}, setting, o);

    this.audio = this._opation.audio;
    this.progressWrap = this._opation.progressWrap;
    this.progress = this._opation.progress;
    this.playBtn = this._opation.playBtn;
    this.allTimeNode = this._opation.allTimeNode;
    this.currentTimeNode = this._opation.currentTimeNode;

    this.init();
}

Control.prototype = {
    // 默认设置
    init: function () {
        let that = this
        //播放控制    
        this.start = true;
        //定时器
        this.timer = null;

        // 设置播放地址
        this.audio.src = this._opation.currentSrc;
        // 进入页面播放速率
        this.setPlaySpeed();
        // 进入页面开始播放地址以及时间点
        this.pagePlay();
        // 每隔2s记录一次播放地址时间
        setInterval(function () {
            that.setCookieSong()
        }, 2000);

        if (this._opation.callback && typeof that._opation.callback == "function") {
            this._opation.callback()
        }


    },
    // 微信端自动播放
    initAutoPlay: function () {
        let that = this;
        document.addEventListener('DOMContentLoaded', function () {
            that.goPlayStyle();
            function audioAutoPlay() {
                that.audio.play()
                document.addEventListener("WeixinJSBridgeReady", function () {
                    // 可用数据足以开始播放 if(that.audio.readyState >=4){ alert('readyState=' + readyState) }
                    that.audio.play()
                }, false);

                that.timer = setInterval(
                    function () {
                        that.oTime()
                    }, 1000)
                that.start = false;
                that.autoNext();
            }
            audioAutoPlay();
        });
    },

    //转换为时间格式
    timeDispose: function (number) {
        var minute = parseInt(number / 60);
        var second = parseInt(number % 60);
        minute = minute >= 10 ? minute : "0" + minute;
        second = second >= 10 ? second : "0" + second;
        return minute + ":" + second;
    },

    //播放时间
    oTime: function () {
        // if(this.audio.readyState >=4){  }  // 可用数据足以开始播放
        var currentProgress = Math.round(this.audio.currentTime / this.audio.duration * parseInt(this.progressWrap.css("width")));
        this.progress.css("width", currentProgress + "px");
        this.allTimeNode.html(this.timeDispose(this.audio.duration));
        this.currentTimeNode.html(this.timeDispose(this.audio.currentTime));
    },

    //播放进度选择
    selectTime: function (event) {
        var moveTo = event.pageX - this.progressWrap.offset().left;
        this.audio.currentTime = moveTo / parseInt(this.progressWrap.css("width")) * this.audio.duration;
        this.progress.css("width", moveTo + "px");
        this.currentTimeNode.html(this.timeDispose(this.audio.currentTime));
    },
    // 主控
    mainControl: function () {
        function pp(a) {
            if (a.start) {
                a.goPlay();
            } else {
                a.goPause();
            }
        }
        setTimeout(pp(this), 500);
    },
    // 监听播放完毕后 自动播放下一曲
    autoNext: function () {
        let that = this
        this.audio.addEventListener('waiting', function () {
            that.allTimeNode.html('加载中...');
        }, false);

        this.audio.addEventListener('ended', function () {
            console.log('自动下一曲')
            that.restTime()
            that.goPause()
            var nextUrl = $("#nextButton").attr("href");
            console.log(nextUrl)
            that.audio.src= nextUrl;
            that.goPlay();
        }, false);
    },
    restTime: function () {
        let that = this;
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            that.audio.addEventListener('canplay', function () {
                that.audio.currentTime = 0;
            }, false);
        } else {
            that.audio.currentTime = 0;
        }
        $.cookie('songTime', 0, { path: '/' });
    },
    // 每隔2s记录 当前播放地址,时间
    setCookieSong: function () {
        var mediaUrl = this.audio.currentSrc;
        var mediaTime = this.audio.currentTime;
        $.cookie('mediaUrl', mediaUrl, { path: '/' });
        $.cookie('mediaTime', mediaTime, { path: '/' });
    },
    // 切换页面 接着播放
    pagePlay: function () {
        let that = this;
        var mediaUrlPage = $.cookie('mediaUrl');
        var mediaTimePage = $.cookie('mediaTime');
        if (mediaTimePage && mediaTimePage != that.audio.duration) {
            mediaTimePage = parseFloat(mediaTimePage)
        } else {
            mediaTimePage = 0;
        }
        console.log('mediaTime=' + mediaTimePage)
        console.log('mediaUrl=' + mediaUrlPage);
        if (mediaUrlPage) {
            this.audio.currentSrc = mediaUrlPage;
            let ua = window.navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                that.audio.addEventListener('canplay', function () {
                    that.audio.currentTime = mediaTimePage;
                }, false);
            } else {
                that.audio.currentTime = mediaTimePage;
            }
        }
    },
    // 倍数播放1.0  1.5 2.0
    setPlaySpeed: function () {
        let that = this;
        var speed = $.cookie('playSpeed');
        speed = speed ? parseFloat(speed) : 1;
        console.log(speed)
        this.audio.playbackRate = speed;
        that.speedStyle($('#playSpeed'), speed);
        // 修改  1-speed10 1.5-speed15  2-speed20
        $('#playSpeed').click(function () {
            let $this = $(this)
            $(this).removeAttr('class')
            speed += 0.5;
            if (speed > 2) { speed = 1; }
            that.speedStyle($this, speed);
            that.audio.playbackRate = speed;
            $.cookie('playSpeed', speed, { path: '/' });
        })
    },
    // 倍数播放控制按钮
    speedStyle: function ($this, spd) {
        $this.find('span').text(spd + '倍数')
        $this.removeAttr('class').attr('class', 'speed' + spd * 10)
    },


    //播放
    goPlay: function () {
        this.audio.play();
        var _this = this;
        this.goPlayStyle();
        this.timer = setInterval(function () { _this.oTime() }, 1000)
        this.start = false;
        this.autoNext();
        thisTime = new Date();
        starttime = thisTime.getFullYear() + "" + (thisTime.getMonth() > 8 ? '' : '0') + (thisTime.getMonth() + 1) + "" + (thisTime.getDate() > 9 ? '' : '0') + thisTime.getDate() + (thisTime.getHours() > 9 ? '' : '0') + thisTime.getHours() + (thisTime.getMinutes() > 9 ? '' : '0') + thisTime.getMinutes() + (thisTime.getSeconds() > 9 ? '' : '0') + thisTime.getSeconds();

    },

    //暂停
    goPause: function () {
        this.audio.pause();
        this.goPauseStyle();
        clearInterval(this.timer);
        this.start = true;
    },

    //播放样式
    goPlayStyle: function () {
        this.playBtn.addClass("pause");
        this.playBtn.removeClass("play");
        $("#progress").show();

    },

    //暂停样式
    goPauseStyle: function () {
        this.playBtn.addClass("play");
        this.playBtn.removeClass("pause");
    },

}

页面样式 style.css

css

/* 页面样式 */
html,
body {
    height: auto;
    min-height: 100vh;
    position: relative;
}

/* 头部样式 */
.header {
    width: 100%;
    height: 1.2rem;
    overflow: hidden;
    position: relative;
    /* position: fixed; */
    /* position: absolute;
    top: 0;
    left: 0;
    z-index: 500; */
}

.header .head-left {
    height: 1.2rem;
    position: absolute;
    top: 0;
    left: 0.47rem;
    z-index: 8;
}

.header .head-left a {
    display: block;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

.header .head-middle {
    width: 100%;
    height: 1.2rem;
}

.header .head-right {
    height: 1.2rem;
    position: absolute;
    top: 0;
    right: 0.47rem;
    z-index: 8;
}

.header .head-right .headRightBox {
    width: auto;
    height: 1.2rem;
}

.header .head-right .headRightBox a {
    height: 100%;
    overflow: hidden;
    text-align: right;
    padding-right: 0.03rem;
    display: block;
    float: left;
    font-size: 0;
}

.header .head-right .headRightBox a img {
    display: block;
    width: 0.48rem;
    height: 0.48rem;
    margin: auto;
}

.pageHead .head-left a {
    text-align: left;
    padding-top: 0.39rem;
    font-size: 0;
}

.pageHead .head-left a img {
    height: 0.43rem;
}

.pageHead .head-middle {
    padding: 0 1.53rem 0;
}

.pageHead .head-middle p {
    text-align: center;
    font-size: 0.48rem;
    line-height: 1.2rem;
    height: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.pageHead .head-middle p i {
    font-size: 0.4rem;
    color: #BFBDB8;
}

.pageHead .head-right .headRightBox a {
    width: 0.8rem;
    background: url('../img/menu.png') no-repeat center;
    background-size: 0.48rem 0.48rem;
}

.wHeadBg {
    background-color: #fff;
    /* 白色底 */
    box-shadow: 0 0 .2rem #e8ecf0;
    -moz-box-shadow: 0 0 .2rem #e8ecf0;
    -webkit-box-shadow: 0 0 .2rem #e8ecf0;
    color: #221802;
}

.nHeadBg {
    background-color: transparent;
    color: #FFF;
    border-bottom: 1px solid #fff;
    /* 透明底 */
}



.fixAudio {
    width: 2rem;
    height: 1.8rem;
    position: fixed;
    right: 0.27rem;
    bottom: 3.2rem;
    z-index: 500;
  }
  .fixAudio p {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.38rem;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
    border: 2px solid #fff;
    z-index: 10;
    text-align: center;
    line-height: calc(0.8rem - 4px);
    background-color: red;
    /* 不支持线性的时候显示 */
    background-image: linear-gradient(#ee9c9c, #df7979, #F53F3F);
    box-shadow: 0 0 0.13rem #8c8c8f;
    -moz-box-shadow: 0 0 0.13rem #8c8c8f;
    -webkit-box-shadow: 0 0 0.13rem #8c8c8f;
  }
  .fixAudio img {
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    left: 0.25rem;
    top: 0.1rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0.13rem #8c8c8f;
    -moz-box-shadow: 0 0 0.13rem #8c8c8f;
    -webkit-box-shadow: 0 0 0.13rem #8c8c8f;
  }


/* ---------------------------------------------------------------- */

/* 磨砂背景 */
.blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.blur img {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    position: absolute;
}
.blur::after{
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
    background-color: #000;
    opacity: 0.3;
    z-index: 2;
}

/* --------------------------- 正文样式   ------------------------------------ */

.audiosWrap {
    width: 100%;
    height: auto;
    min-height: 100vh;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.fixLayer{
    position: fixed;
    z-index: 100000;
    top: 100vh;
}

.slideOut{
    animation:slideOut 0.5s  linear forwards ;
    -webkit-animation:slideOut 0.5s linear forwards ; /* Safari 和 Chrome */
}
@keyframes slideOut {
    from { top: 0; } to { top: 100vh; }
}
@-webkit-keyframes slideOut{
    from { top: 0; } to { top: 100vh; }
}
.slideIn{
    animation:slideIn 0.5s  linear forwards ;
    -webkit-animation:slideIn 0.5s linear forwards ; /* Safari 和 Chrome */
}
@keyframes slideIn {
    from { top: 100vh; } to {top: 0;}
}
@-webkit-keyframes slideIn{
    from { top: 100vh; } to {top: 0;}
}
/* --------------------------------------------------------------- */

.cdText{

}
.cdText p{
    height: .67rem;
    padding: .4rem;
    font-size: .32rem;
    color: #999;
    text-align: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- */

/* 封面 */
.cdBox {
    position: relative;
    margin: 1.07rem auto;
}
.coverBox {

}
.coverBox img {
    width: 6.4rem;
    height: 6.4rem;
    display: block;
    margin: auto;
    border-radius: 50%;
    box-shadow: #807D7D 0px 0.03rem 0.16rem;
    -webkit-box-shadow: #807D7D 0 0.03rem 0.16rem;
    -moz-box-shadow: #807D7D 0px 0.03rem 0.16rem;
}

页面样式 audio.css

css

/* 播放器样式 */
*{
    font-family:'PingFang-SC-Bold' ;
    margin:0;
    padding: 0;
    -moz-box-sizing: border-box;  
    -webkit-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-overflow-scrolling: touch;
    list-style: none;
  }
a{ text-decoration: none;}
.controlBox{

}

#playContent{
    width: 100%;
    z-index: 50;
    overflow: hidden;
    text-align: center;
    min-height: 1.5rem;
}
.timeBox{ 
    overflow: hidden;
    margin-top: .27rem;
}

#currentTime { 
    font-size: .32rem;
    color: #B3B3B3;
    /* display: inline-block;
    vertical-align: middle; */
    /* margin-left: 0.16rem; */
    float: left;
}
#totleTime {
    font-size: .32rem;
    color: #B3B3B3;
    /* display: inline-block;
    vertical-align: middle; */
    /* margin-right: 0.16rem; */
    float: right;
}
#progressWrap{    
    width: 7.2rem;
    height: .12rem;
    border-radius: .09rem;
    background-color:#E6E6E6;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

#progress{
    background: #F2AC17;
    height: .12rem;
    position: absolute;
    width: 0;
    top: 0;
    left: 0;
    display: none;
}

#progress:after{
    content: "";
    position: absolute;
    width: .24rem;
    background: #F2AC17;
    height: .24rem;
    top: -0.06rem;
    right: -0.24rem;
    border-radius: 50%;
}



.controlBox ul{
    width: 7.2rem;
    overflow: hidden;
    position: relative;
    z-index: 55;
    margin: .2rem auto ;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.controlBox ul li a{
    display: block;
    margin: auto;
}
.controlBox ul li.small{
    width: 1.33rem;
    height: 1.33rem;
}
.controlBox ul li.small a{
    width: 1.33rem;
    height: 1.33rem;
    border-radius: 50%;
}
.controlBox a.next{
    background:url(../img/next.png) no-repeat 50%;
    background-size: 1.33rem 1.33rem;
}
.controlBox a.prev{
    background:url(../img/pre.png) no-repeat center;
    background-size: 1.33rem 1.33rem;
} 


.controlBox ul li.playbg{
    width: 1.81rem;
    height: 1.81rem;
}
.controlBox ul li.playbg a{
    width: 1.81rem;
    height: 1.81rem;
    border-radius: 50%;
}

.controlBox a.play{
    background:url(../img/pause.png) no-repeat center;
    background-size: 1.81rem 1.81rem;
}

.controlBox a.pause{
    background:url(../img/play.png) no-repeat center;   
    background-size: 1.81rem 1.81rem;
}



.controlBox ol{
    width: 7.2rem;
    overflow: hidden;
    position: relative;
    z-index: 55;
    margin: .93rem auto  0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.controlBox ol li a{
    min-width: 1.33rem;
    display: block;
    text-align: center;
}
.controlBox ol li a i{
    display: block;
    height: .53rem;
    margin: 0 auto;
}
.controlBox ol li a span{
    display: block;
    color: #999999;
    font-size: .32rem;
}

.controlBox ol li.hasCollected i{
    background:url(../img/start.png) no-repeat center;   
    background-size: auto .48rem;
}
.controlBox ol li.hasCollected span{
    color: #F2AC17;
}
.controlBox ol li.noCollected i{
    background:url(../img/start0.png) no-repeat center;   
    background-size: auto .48rem;
}

.controlBox ol li.speed10 i{
    background:url(../img/1b.png) no-repeat center;   
    background-size: auto .48rem;
}
.controlBox ol li.speed15 i{
    background:url(../img/1.5b.png) no-repeat center;   
    background-size: auto .48rem;
}
.controlBox ol li.speed20 i{
    background:url(../img/2b.png) no-repeat center;   
    background-size: auto .48rem;
}

.controlBox ol li.directory i{
    background:url(../img/ml.png) no-repeat center;   
    background-size: auto .48rem;
}
  • Copyright： Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2015-2021 魏姣
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信