移动端的音频播放

html代码:

<div class="courseInfo">
                    <p class="picTeacher">
                        <img src="../img/Group 8 Copy.png" />
                        <span class="teacherDetial">课程详情</span>
                    </p>
                    <p class="audioC">音频课程</p>
                    <div class="audio-wrapper">
                        <audio>
                            <!--
                                作者：15034173008@163.com
                                时间：2018-03-29
                                描述：在本地测试的时候，source中的src需要用网上在线的音乐链接，如果用本地的音频，在chrome播放音频时不能控制播放进程
                            -->
                            <source src="http://m10.music.126.net/20180330105747/bfabe9fca0e227d4b70dc2d9dd3f5fc8/ymusic/edc1/769a/2222/a338ca5b70cd1ca3bb7d06b2edbe70a9.mp3" type="audio/mp3">
                        </audio>
                        <div class="audio-left"><img id="audioPlayer" src="../img/Group 4 Copy.png"></div>
                        <div class="audio-right">
                            <p class="teacherName"><span>上帝视角看民宿产业 - 马化腾</span><span class="tryListen">试听三分钟</span></p>
                            <div class="progress-bar-bg" id="progressBarBg"><span id="progressDot"></span>
                                <div class="progress-bar" id="progressBar"></div>
                            </div>
                            <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span><span class="audio-length-total"></span></div>
                        </div>
                    </div>
                </div>

css代码：
.audio-wrapper {
    width: 90%;
    margin-left: 5%;
    margin: 1.2rem auto;
    height: 7.357rem;
    border: 1px solid #e0e0e0;
    background: #FFFFFF;
    box-shadow: 0 2px 0.857rem 0 rgba(0,0,0,0.07);
    border-radius: 0.571rem;
}
.audio-left {
    float: left;
    text-align: center;
    width: 16%;
    height: 100%;
}
.audio-left img {
    width: 2.285rem;
    position: relative;
    top: 2.785rem;
    margin: 0;
    display: initial;   /* 解除与app的样式冲突 */
    cursor: pointer;
}
.audio-right {
    margin-right: 2%;
    float: right;
    width: 82%;
    height: 100%;
}
.audio-right p {
    height: 35%;
    margin: 1.142rem 0;
    /* 歌曲名称只显示在一行，超出部分显示为省略号 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: PingFang-SC-Medium;
font-size: 0.928rem;
color: #333333;
}
.progress-bar-bg {
    position: relative;
    height: 0.428rem;
    width: 94%;
    margin-top: -1.3rem;
    margin-left: .5rem;
    cursor: pointer;
    background: #F6F5F8;
border-radius: 0.571rem;
}
.progress-bar {
    width: 0;
    height: 0.428rem;
    background: #3D7ADE;
border-radius: 0.571rem;
}
.progress-bar-bg span {
    content: " ";
    width: 0.714rem;
    height: 0.714rem;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #3e87e8;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -0.357rem;
    margin-left: -0.357rem;
    cursor: pointer;
}
.audio-time {
    overflow: hidden;
    margin-top: 0.629rem;
    margin-left: 0.3rem;
    font-family: PingFangSC-Regular;
    font-size: 0.857rem;
    color: #999999;
}
.audio-length-total {
    float: right;
    font-size: 0.857rem;
}
.audio-length-current {
    float: left;
    font-size: 0.857rem;
}
.teacherName{
    width: 100%;
    position: relative;
    font-family: PingFang-SC-Medium;
    font-size: 0.928rem;
    color: #333333; 
}
.teacherName .tryListen{
    position: absolute;
    right: 0.2rem;
    border: 0.5px solid #FF7200;
    border-radius: 0.714rem;
    padding: 0.1rem 0.4rem;
    font-family: PingFang-SC-Regular;
    font-size: 0.785rem;
    color: #FF7200;
    letter-spacing: 0;
    text-align: center;
}
.teacherDetial{
    font-family: PingFangSC-Semibold;
    font-size: 1.214rem;
    color: #333333;
    letter-spacing: 0;
}

js代码：

<script>
    $(document).ready(function () {
            // 控制音频文件名显示宽度
            var maxW = $('.audio-right').width();
            $('.audio-right p').css({
                "max-width": maxW
            });
        
            initAudioEvent();
        });
        
        /**
         * 初始化音频控制事件
         */
        function initAudioEvent() {
            var audio = $('audio')[0];
            console.log(audio.duration)
            // 点击播放/暂停图片时，控制音乐的播放与暂停
            $('#audioPlayer').click(function () {
                if(audio.currentTime >=180){
                    return false;
                }
                // 监听音频播放时间并更新进度条
                audio.addEventListener('timeupdate', function () {
                    updateProgress(audio);
                    console.log(updateProgress(audio))
                }, false);
        
                // 监听播放完成事件
                audio.addEventListener('ended', function () {
                    audioEnded();
                }, false);
        
                // 改变播放/暂停图片
                if (audio.paused) {
                    // 开始播放当前点击的音频
                    audio.play();
                    $('#audioPlayer').attr('src', '../img/Group 33 Copy 6.png');
                } else {
                    audio.pause();
                    $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
                }
                console.log(audio.currentTime);
                //试听三分钟
                if(audio.currentTime >=180){
                    audio.pause();
                    $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
                }
            });
        
            // 点击进度条跳到指定点播放
            // PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
            $('#progressBarBg').on('mousedown', function (e) {
                // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
                audio.currentTime = 10;
                if (!audio.paused || audio.currentTime != 0) {  //音频播放，且播放时间不为0. 如果音频暂停，则audio.paused为true
                    var pgsWidth = $('.progress-bar-bg').width();
                    var rate = e.offsetX / pgsWidth;
                    audio.currentTime = audio.duration * rate;   //在火狐、IE浏览器中设置成功，但是在chrome中失败。解决方案：将src把音频/视频放到服务器，使用http://的播放地址
                    console.log(audio.currentTime)
                    //试听三分钟
                    if(audio.currentTime >=180){
                        audio.pause();
                        $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
                    }
                    updateProgress(audio);
                }
            });
        
            var dot = document.getElementById('progressDot');
        
            // 鼠标拖动进度点时可以调节进度
            // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
            // 鼠标按下时
            dot.onmousedown = function (e) {
                if (!audio.paused || audio.currentTime != 0) {
                    var oriLeft = dot.offsetLeft;
                    var mouseX = e.clientX;
                    var maxLeft = oriLeft; // 向左最大可拖动距离
                    var maxRight = document.getElementById('progressBarBg').offsetWidth - oriLeft; // 向右最大可拖动距离
        
                    // 禁止默认的选中事件（避免鼠标拖拽进度点的时候选中文字）
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false;
                    }
        
                    // 禁止事件冒泡
                    if (e && e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        window.event.cancelBubble = true;
                    }
        
                    // 开始拖动
                    document.onmousemove = function (e) {
                        var length = e.clientX - mouseX;
                        if (length > maxRight) {
                            length = maxRight;
                        } else if (length < -maxLeft) {
                            length = -maxLeft;
                        }
                        var pgsWidth = $('.progress-bar-bg').width();
                        var rate = (oriLeft + length) / pgsWidth;
                        audio.currentTime = audio.duration * rate;
                        updateProgress(audio);
                    };
        
                    // 拖动结束
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                }
            };
        }
        
        /**
         * 更新进度条与当前播放时间
         * @param  audio - audio对象
         */
        function updateProgress(audio) {
            var value = audio.currentTime / audio.duration;
            $('#progressBar').css('width', value * 100 + '%');
            $('#progressDot').css('left', value * 100 + '%');
            $('#audioCurTime').html(transTime(audio.currentTime));
            $('.audio-length-total').text(transTime(audio.duration));
            if(audio.currentTime >= 180){
                audio.pause();
                $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');   
            }
            
        }       
        /**
         * 播放完成时把进度调回开始的位置
         */
        function audioEnded() {
            $('#progressBar').css('width', 0);
            $('#progressDot').css('left', 0);
            $('#audioPlayer').attr('src', '../img/Group 4 Copy.png');
        }
        
        /**
         * 音频播放时间换算
         * @param {number} value - 音频当前播放时间，单位秒
         */
        function transTime(value) {
            var time = "";
            var h = parseInt(value / 3600);
            value %= 3600;
            var m = parseInt(value / 60);
            var s = parseInt(value % 60);
            if (h > 0) {
                time = formatTime(h + ":" + m + ":" + s);
            } else {
                time = formatTime(m + ":" + s);
            }
        
            return time;
        }
        
        /**
         * 格式化时间显示，补零对齐
         * eg：2:4  -->  02:04
         * @param {string} value - 形如 h:m:s 的字符串 
         */
        function formatTime(value) {
            var time = "";
            var s = value.split(':');
            var i = 0;
            for (; i < s.length - 1; i++) {
                time += s[i].length == 1 ? ("0" + s[i]) : s[i];
                time += ":";
            }
            time += s[i].length == 1 ? ("0" + s[i]) : s[i];
        
            return time;
        }
    </script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,700评论 0赞 8
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,205评论 0赞 11
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,899评论 0赞 1
  • 第一章三大魔王
    三抹残影掠过月夜，几十个黑影紧追不舍，之一瞬间，三抹残影便消失的无影无踪，周围一片寂静，黑影停止了追捕，警惕的看着...
    南宫北妖阅读 229评论 0赞 0
  • 寄情
    【“贪欲”是贫穷的种子，“放下”是福德的积粮。“恶”恐世人知便是大恶，“善”欲世人明不是真善。平生不做皱眉事，世上...
    小吴桥阅读 362评论 0赞 3