javascript 自定义音频/视频播放控制器

最新推荐文章于 2024-10-09 11:50:19 发布

原创

最新推荐文章于 2024-10-09 11:50:19 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#audio #video #播放控制器

效果：（视频和音频，看起来一样，只是代码有些小区别）

在这里插入图片描述

播放条实现：
ShareArticle.html:

    <div class="audioControl appletsControl playControlMenu">
        <!-- 播放条 -->
        <div class="appletsProgress">
            <div class="boxprogress">
                <div class="progress-bar">
                    <div class="now" data-attr=''></div>
                </div>
            </div>
            <div class="startEndNum" style="display:none;"><span class="start"></span><span class="end"></span></div>
        </div>
       <!-- 控制按钮 -->
        <ul class="ac-item">
            <li><a id="speed"><img class="appletsNewSize" src="https://static.eudic.net/web/ting/applets/applet1.0x.png"></a></li>
            <li><a id="pre"><img src="https://static.eudic.net/web/ting/applets/icon_left_normal.png"></a></li>
            <li class="playPar"><a id="play"><img src="https://static.eudic.net/web/ting/applets/icon_play_normal.png"></a></li>
            <li class="pausePar"><a id="pause"><img src="https://static.eudic.net/web/ting/applets/icon_stop_normal.png"></a></li>
            <li><a id="next"><img src="https://static.eudic.net/web/ting/applets/icon_right_normal.png"></a></li>
            <li><a id="position"><img class="appletsNewSize positionSize" src="https://static.eudic.net/web/ting/applets/highlight_nor.png"></a></li>
        </ul>
    </div>
    <!-- 播放倍速 start -->
    <ul class="appletsControlUlSpeed">
        <li class="liSpeed" data-speed="0.6">0.6x</li>
        <li class="liSpeed" data-speed="0.8">0.8x</li>
        <li class="liSpeed high_light" data-speed="1.0">1.0x</li>
        <li class="liSpeed" data-speed="1.2">1.2x</li>
        <li class="liSpeed" data-speed="1.4">1.4x</li>
        <li class="liSpeed" data-speed="1.6" >1.6x</li>
        <li class="liSpeed" data-speed="1.8">1.8x</li>
        <li class="liSpeed" data-speed="2.0">2.0x</li>
    </ul>
    <!-- 播放倍速 end -->

音频播放的js:(播放条代码在 “播放进度条 start ”和 “播放进度条 end ” 这个注释之间)

// 音频播放控制菜单

    //音频播放
    var Play = (function() {
        var timeRange, orderIndex;
        var transfered = [],
            origin = [];
        var highlightCls = 'high_light';

        function getOrder() {
            var value, search = location.search;
            if (!search) {
                orderIndex = 0;
            } else {
                search = location.search.split('?')[1].split('&');
                for (var i = 0, l = search.length; i < l; i++) {
                    value = search[i].split('=');
                    if (value[0] == 'order') {
                        if (value[1] == 'undefined') {
                            orderIndex = 0;
                        } else {
                            orderIndex = parseInt(value[1]);
                        }
                        return orderIndex;
                    }
                }
            }
            return 0;
        }

        function initPage(specialT) {
            if (specialT) {
                var speTitle = $('<p class="spmobiletitle">' + specialT + '</p>');
                $('h1').next().before(speTitle);
            }
            $('.site a').text(location.host + '/ting').attr('href', 'http://' + location.host + '/ting');
            $('a').bind('touchstart', function() {
                $(this).attr('class', 'hover');
            }).bind('touchend', function() {
                $(this).attr('class', '');
            });
            var h1Sentence = $('h1 .sentence');
            if (h1Sentence) {
                h1Sentence.removeClass('sentence');
            }
        }

        function initSoundSegment() {
            var htmlsource = document.body.innerHTML;
            var htmlsource1 = document.getElementById("article").innerHTML;
            var v1 = htmlsource1.match(/[0-5][0-9]\:[0-5][0-9]\.[0-9][0-9]/g);
            var v2 = htmlsource1.match(/([0-1][0-9]|2[0-3])\:[0-5][0-9]\:[0-5][0-9]/g);
            if (v1 != null) {
                document.body.innerHTML = htmlsource.replace(/(["_,])(\d\d:\d\d\.\d\d)/g, '$100:$2');
            }
            if (v2 != null) {
                document.body.innerHTML = htmlsource.replace(/(["_,])(\d\d:\d\d:\d\d)/g, '$1$2.00');
            }
            timeRange = $('#J_CIKU_sentence_time_range').val().split(',');
            for (var i = 0, l = timeRange.length; i < l; i++) {
                origin.push(timeRange[i]);
                var time = timeRange[i].split('.')[0].split(':'), s;
                s = time[0] * 3600 + time[1] * 60 + time[2] * 100 / 100;
                s += timeRange[i].split('.')[1] / 100;
                s *= 1000;
                transfered.push(s);
            }
        }

        var AudioPlay = function(audio, play, pause, next, pre,position) {
            var self = this;
            this.sentence = $('.sentence');
            this.audio = audio;
            this.play = play;
            this.pause = pause;
            this.havePaused = false;
            this.startIndex = 0;
            this.currentTime = 0;
            this.escape = 50;
            this.audio.load();
            var link = window.location.href.replace(/play/i, 'play').split('play')[0] + 'Play';
            if (window.location.search) {
                link = link.split('?')[0];
            }
            //在音频/视频（audio/video）的播放位置(播放到x秒)发生改变时触发高亮效果
            $(this.audio).bind('timeupdate', function() {
                var time = self.audio.currentTime,
                    totalTime = self.audio.duration,
                    mTime = time * 1000,
                    percent = time / totalTime,
                    item = self.startIndex;
                //if (item == transfered.length - 1) {//最后一句
                    if (mTime < transfered[1]) {
                        self.changeHighLight(0);
                        self.startIndex = 0;
                   // }
                } else if (mTime > transfered[item + 1]) {//前进
                    self.changeHighLight(item + 1);
                    self.startIndex = item + 1;
                }else if(mTime<=transfered[item-1]){//后退
                    self.changeHighLight(item - 1);
                    self.startIndex = item - 1;
                }
            });

            //点击播放
            this.play.bind('tap', function(e) {
                self.playSound(e);
            });
            //点击暂停
            this.pause.bind('tap', function(e) {
                self.stopSound(e);
            });

          var barWidth=$('.boxprogress').width()-78;
          $('.progress-bar').css('width',barWidth);

            //~~~~~~~~~~~~~~~~~~~~~~~~~~~播放进度条 start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
            const audios = document.getElementById('audio');
            const start = document.querySelector('.start');
            const end = document.querySelector('.end');
            const progressBar = document.querySelector('.progress-bar');
            const now = document.querySelector('.now');
            var width = document.querySelector('.progress-bar').offsetWidth;
            var x1,y1,olfLeft,newLeft,per;

            if(audios.pause()){
              $('.playPar').hide();
              $('.pausePar').show();
            }else{
               $('.playPar').show();
               $('.pausePar').hide();
            }

            function conversion (value) {
                let minute = Math.floor(value / 60);
                minute = minute.toString().length === 1 ? ('0' + minute) : minute;
                let second = Math.round(value % 60)
                second = second.toString().length === 1 ? ('0' + second) : second;
                return `${minute}:${second}`;
            }
             //在视频的元数据加载后执行  onloadedmetadata
            audios.onloadedmetadata = function () {
                end.innerHTML = conversion(audios.duration);//ios 音频未播放前获取不到duration
                start.innerHTML = conversion(audios.currentTime);
            }
             end.innerHTML = conversion(audioDuration);//所以时长从后台获取duration
            $('.now').attr('data-attr',conversion(audios.currentTime)+'/'+conversion(audioDuration));

            //点击播放条
            progressBar.addEventListener('click', function (event) {
                let coordStart = this.getBoundingClientRect().left;//元素左边距离页面左边的距离
                let coordEnd = event.pageX;
                let p = (coordEnd - coordStart) / this.offsetWidth;
                now.style.width = p * 100 + '%';
                audios.currentTime = p * audios.duration;
                audios.play();
               $('.playPar').hide();
               $('.pausePar').show();
            });


            //拖拽跳转进度：监听 onTouchStart 、 onTouchMove 和 onTouchEnd
            now.addEventListener("touchstart",handleStart,{ passive: false });
            now.addEventListener("touchmove",handleMove,{ passive: false });
            now.addEventListener("touchend",handleEnd,{ passive: false });
            function handleStart(e){
                e.preventDefault();
                var touches = e.changedTouches;
                x1 = touches[0].pageX;
                y1 = touches[0].pageY;
                olfLeft=x1;
            }
            function handleMove(e){
                e.preventDefault();
                var x2 = e.changedTouches[0].pageX;
                var y2 = e.changedTouches[0].pageY;
                newLeft = x2-x1;
                nowLeft = olfLeft+newLeft;
                if(nowLeft<0){
                    nowLeft = 0;
                }
                if(nowLeft>width){
                   nowLeft = width;
                }
                progressBar.style.width=nowLeft+"px";
                per = nowLeft/width;
                audios.currentTime = audios.duration*per;
                now.style.width = audios.currentTime / audios.duration * 100 + '%';
            }
            function handleEnd(e){
                now.removeEventListener("touchmove",handleEnd,false);
                audios.currentTime =audios.duration*per;
            }

            setInterval(() => {
                start.innerHTML = conversion(audios.currentTime);
                $('.now').attr('data-attr',conversion(audios.currentTime)+'/'+conversion(audioDuration));
                now.style.width = audios.currentTime / audios.duration * 100 + '%';
            }, 1000);
           //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~播放进度条 end~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

           //播放结束，显示播放按钮
            audios.addEventListener('ended', function () {
                $('.playPar').show();
                $('.pausePar').hide();
            }, false);


            //点击播放下一句
            next.bind('tap', function(e) {
                self.startIndex ++;
                if(isNaN(transfered[0])){//木有时间戳
                  audios.currentTime += 10;//前进10秒
                }
                if(self.startIndex>=transfered.length){
                    self.startIndex = transfered.length-1;
                }
                self.playSound(e);


            });
            //点击播放上一句
            pre.bind('tap', function(e) {
                self.startIndex --;
                if(isNaN(transfered[0])){//木有时间戳
                  audios.currentTime -= 10;//后退10秒
                }
                if(self.startIndex < 0){
                    self.startIndex = 0