音频——H5 audio

分享站又有新功能了：将文件站上的语音文件正确播放出来。效果图：

   

暂停：

          

播放：

          

实现的效果：类似于音乐播放器一般，但是较之更简单一些，可以正常播放语音，有拖动、快进后退效果便可。

思路：

首先想到的便是利用H5中的audio标签来实现

<audio> 标签定义声音，比如音乐或其他音频流。

可是最终却发现原始的H5标签播放的音频效果，有点太牵强，其美观程度远远达不到我们预期的，于是只能摒弃这样的想法，另辟蹊径了。最终想到最完美的解决方案依旧是利用H5的audio标签，但是得重新定义它的滚动条以及前进、快退等事件。

参考资料：

HTML  <audio>标签 http://www.w3school.com.cn/tags/tag_audio.asp

HTML 5 视频/音频参考手册 http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

拜读：https://segmentfault.com/a/1190000007332028

主要代码：

---

<div class="container">
    <div class="starter-template">
        <h1>{{data.title}}</h1>
        <div class="vicoebox">
            <div class="vicoebox-img">
                <a href="javascript:void(0)" onclick="audioplay()" class="btn-play"></a>
                <img src="{{imgSiteUrl}}{{img}}" width="190" height="190"/>
            </div>
            <audio id="audio" preload type="audio/mpeg" src="{{imgSiteUrl}}{{data.content}}"></audio>
            <!-- 语音控制模块开始 -->
            <div class="g-panel">
                <div class="m-progress m-progress-song">
                    <div id="songprogress" class="progress"></div>
                    <div id="songbar" class="progressbar"></div>
                    <ul class="songtime">
                        <li class="start" id="start">0:00</li>
                        <li class="end" id="end">0:00</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 语音控制模块结束 -->
    </div>
</div>

          

js：

<script type="text/javascript">
    jQuery('.btn-play').click(function () {
        if (jQuery(this).hasClass("btn-play")) {
            audio.play();
            jQuery(this).removeClass('btn-play').addClass('btn-pause');
        } else {
            audio.pause();
            jQuery(this).removeClass('btn-pause').addClass('btn-play');
        }
    });

    //---------------------------------工具方法开始
    var Util = function () {
        // 格式化时间为分：秒的形式
        function formatTime(seconds, curS) {
            var totalS = parseInt(seconds);
            var minute = Math.floor((totalS / 60));
            var second = totalS - minute * 60;
            second = second < 10 ? ("0" + second) : second;
            return minute + ":" + second;
        }

        // 将时间转化为百分比
        function timeToPercent(curS, totalS) {
            var percent = parseInt((Number(curS) / Number(totalS)) * 100) + "%";
            return percent;
        }

        // 更新时间
        function updateTime(dom, seconds) {
            var result = formatTime(seconds);
            dom.html(result);
        }

        // 更新进度条
        function updateProgress(dom, percent) {
            dom.css("width", percent);
            return true;
        }

        // 更新进度滑块
        function updateBarPos(dom, percent) {
            dom.css("left", percent);
            return true;
        }

        return {
            formatTime: formatTime,
            updateTime: updateTime,
            updateProgress: updateProgress,
            updateBarPos: updateBarPos,
            timeToPercent: timeToPercent,
        };
    }();
    //---------------------------------工具方法结束

    //更新结束时间
    jQuery("#audio")[0].addEventListener("loadedmetadata", function () {
        duration = this.duration;//获取总时长
        formatDuration = Util.formatTime(duration);
        jQuery('.end').html(formatDuration);
    });

    function audioplay() {
        var audio = jQuery("#audio")[0];
        var start = jQuery('.start');//开始时间
        var end = jQuery('.end');//结束时间

        var sprocontainer = jQuery(".m-progress-song");//歌曲进度条容器
        var sProgress = jQuery("#songprogress");
        var songbar = jQuery("#songbar");//歌曲进度条滑块


        // 监听歌曲播放时间发生变化事件
        audio.addEventListener("timeupdate", function () {
            var curS = audio.currentTime;
            var duration = audio.duration;
            var curPercent = Util.timeToPercent(curS, duration);

            // 更新歌曲时间，进度条
            Util.updateTime(start, curS);//更新开始时间
            Util.updateProgress(sProgress, curPercent);
            Util.updateBarPos(songbar, curPercent);
        });

        //歌曲进度条滑块滑动事件
        songbar.on("touchstart", function (e) {
            e.preventDefault();
            e.stopPropagation();

            jQuery(audio).off("timeupdate");
            audio.pause();

            var totalW = jQuery(sprocontainer).width(); //播放条容器总长度
            var leftDis = jQuery(sProgress).offset().left;
            var curS = 0;
            var curPercent = 0;
            var percent = "";
            var touchMove = e.originalEvent.changedTouches[0].clientX;
            var dis = e.originalEvent.changedTouches[0].clientX - leftDis;
            songbar.on("touchmove", function (e) {//当触点在触控平面上移动时触发touchmove事件
                e.preventDefault();
                e.stopPropagation();
                touchMove = e.originalEvent.targetTouches[0].clientX;
                dis = touchMove - leftDis > totalW ? totalW : touchMove - leftDis;
                dis = touchMove - leftDis < 0 ? 0 : dis;
                percent = Math.floor(dis / totalW * 100) + "%";
                Util.updateProgress(sProgress, percent);
                Util.updateBarPos(songbar, percent);

            });
            songbar.on("touchend", function (e) {//当手指从屏幕上离开的时候触发
                e.preventDefault();
                e.stopPropagation();
                if (audio.paused) {
                    audio.play();
                    jQuery('.btn-play').removeClass('btn-play').addClass('btn-pause');
                }

                percent = Math.floor(dis / totalW * 100) + "%";
                Util.updateProgress(sProgress, percent);
                Util.updateBarPos(songbar, percent);
                duration = audio.duration;
                curS = duration * parseInt(percent.replace("%", "")) / 100;
                audio.currentTime = curS;

                audio.ontimeupdate = function () {
                    var curS = audio.currentTime;
                    var curPercent = Util.timeToPercent(curS, duration);

                    // 更新歌曲时间，进度条
                    Util.updateTime(start, curS);
                    Util.updateProgress(sProgress, curPercent);
                    Util.updateBarPos(songbar, curPercent);
                };
                songbar.off("touchmove touchend");
            });
        });

        // 歌曲进度条点击事件
        sprocontainer.on("mousedown", function (e) {
            var totalW = jQuery(sprocontainer).width();
            var leftDis = jQuery(sProgress).offset().left;
            var curS = 0;
            var curPercent = 0;
            var dis = e.pageX - leftDis > totalW ? totalW : e.pageX - leftDis;
            percent = Math.floor(dis / totalW * 100) + "%";

            sprocontainer.on("mouseup", function (e) {
                Util.updateProgress(sProgress, percent);
                Util.updateBarPos(songbar, percent);
                duration = audio.duration;
                curS = duration * parseInt(percent.replace("%", "")) / 100;
                audio.currentTime = curS;

                audio.ontimeupdate = function () {
                    var curS = audio.currentTime;
                    var curPercent = Util.timeToPercent(curS, duration);

                    // 更新歌曲时间，进度条
                    Util.updateTime(start, curS);
                    Util.updateProgress(sProgress, curPercent);
                    Util.updateBarPos(songbar, curPercent);
                };
                sprocontainer.off("mouseup");
            });

        });

        // 歌曲播放完毕事件
        audio.onended = function() {
            jQuery('.btn-pause').removeClass('btn-pause').addClass('btn-play');
        };
    }
</script>

遇到的问题：

1.duration 获取歌曲的总时间：H5中有获取duration的方法，基本在音频播放的事件里，此属性起到了至关重要的作用；

2.移动端的触摸事件：touchstart、touchend、touchmove:

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发；

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动；

touchend事件：当手指从屏幕上离开的时候触发。

而每个Touch对象包含的属性如下；

clientX：触摸目标在视口中的x坐标；

clientY：触摸目标在视口中的y坐标；

identifier：标识触摸的唯一ID；

pageX：触摸目标在页面中的x坐标；

pageY：触摸目标在页面中的y坐标；

screenX：触摸目标在屏幕中的x坐标；

screenY：触摸目标在屏幕中的y坐标；

target：触目的DOM节点目标。

关于这三个事件，其实挺有意思的：虽然自己之前很少接触过移动端的开发，但是总是被身边同事的各种“神技能”震撼到，而当自己真的将别人手中的“神技能”实现时，还是挺有成就感的，总感觉一切就是那样神奇（哈哈……这也是为什么喜欢这份工作的原因，乐在其中。）；

3.鼠标事件中的mousedown、mouseup（这两种事件见得次数多了，也便不赘述了）。

滴答滴答前进中：

乐在其中，还需要永不止步。