自定义音频播放器的实现

前言

​ 最近在做一个音频直播的项目，对于音频播放的功能是使用jQuery实现的，我自己也表示很服气。以至于后面音频自动连续播放时出现了一些bug，幸好后面都解决了。

其实一开始我是使用插件写的，但当时对于播放的样式处理我觉得很烦就放弃了。（现在想想都是泪！）

整体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Title</title>
    <link rel="stylesheet" href="css/audio.css">
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/remauto.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="js/audio.js"></script>
	<!--注意：微信接口文件必须放在audio.js文件之前-->
</head>
<body>
<div class="audio-liveroom">
    <div class="audio-list">
        <div class="audio-list-item">
            <div class="audio-send-time text-center">08-21 20:22</div>
            <div class="audio-send-main clearfix">
                <div class="audio-send-avatar pull-left">
                    <img src="img/avatar.png" alt="" class="radius-half">
                </div>
                <div class="audio-send-content pull-left">
                    <div class="audio-send-name">营养师</div>
                    <div class="audio-send-box">
                        <div class="audio-box">
                            <audio>
                                <source src="audio/BlueDucks_FourFlossFiveSix.mp3">
                                <source src="audio/BlueDucks_FourFlossFiveSix.ogg">
                                <source src="audio/BlueDucks_FourFlossFiveSix.wav">
                            </audio>
                            <div class="controls-bar clearfix">
                                <!--开关-->
                                <div class="audio-switch">
                                    <div class="switch-btn switch-pause audio-spirit"></div>
                                </div>
                                <!--进度条-->
                                <div class="progress-box">
                                    <div class="progress" id="progress">
                                        <span class="bar" id="bar"></span>
                                        <div class="control" id="control"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span class="no-play-flag radius-half"></span>
                        <span class="audio-duration">60"</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="audio-list-item">
            <div class="audio-send-time text-center">08-21 20:22</div>
            <div class="audio-send-main clearfix">
                <div class="audio-send-avatar pull-left">
                    <img src="img/avatar.png" alt="" class="radius-half">
                </div>
                <div class="audio-send-content pull-left">
                    <div class="audio-send-name">营养师</div>
                    <div class="audio-send-box">
                        <div class="audio-box">
                            <audio>
                                <source src="audio/BlueDucks_FourFlossFiveSix.mp3">
                                <source src="audio/BlueDucks_FourFlossFiveSix.ogg">
                                <source src="audio/BlueDucks_FourFlossFiveSix.wav">
                            </audio>
                            <div class="controls-bar clearfix">
                                <!--开关-->
                                <div class="audio-switch">
                                    <div class="switch-btn switch-pause audio-spirit"></div>
                                </div>
                                <!--进度条-->
                                <div class="progress-box">
                                    <div class="progress">
                                        <span class="bar"></span>
                                        <div class="control"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span class="no-play-flag radius-half"></span>
                        <span class="audio-duration">60"</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

整体效果如图所示：

audio.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
.clearfix:after {
         content: ".";
         display: block;
         height: 0;
         visibility: hidden;
         clear: both;
     }

     .clearfix {
         zoom: 1;
     }

     .audio-spirit {
         display: inline-block;
         width: 4.46rem;
         height: 3.01rem;
         background: url("img/audio-spirit.png") no-repeat;
         -webkit-background-size: 4.46rem 3.01rem;
         background-size: 4.46rem 3.01rem;
     }

     .pull-left {
         float: left;
     }

     .radius-half {
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         border-radius: 50%;
     }

     .audio-list {
         padding: 0 0.2rem;
     }

     .audio-send-time {
         width: 100%;
         font-size: 0.2rem;
         color: #989898;
         margin-bottom: 0.3rem;
     }

     .audio-send-main {
         width: 100%;
         margin-bottom: 0.3rem;
     }

     .audio-send-avatar {
         width: 0.82rem;
         height: 0.82rem;
     }

     .audio-send-content {
         padding-left: 0.2rem;
     }

     .audio-send-name {
         color: #323232;
         font-size: 0.24rem;
         margin-bottom: 0.1rem;
     }

     .audio-send-box {
         position: relative;
     }

     .no-play-flag {
         position: absolute;
         top: -0.1rem;
         right: 0.24rem;
         width: 0.18rem;
         height: 0.18rem;
         background-color: #f94747;
     }

     .audio-duration {
         position: absolute;
         right: 0.16rem;
         top: 50%;
         margin-top: -0.12rem;
         font-size: 0.24rem;
         color: #646464;
     }

     .controls-bar {
         -webkit-border-radius: 0.42rem;
         -moz-border-radius: 0.42rem;
         border-radius: 0.42rem;
         background-color: #6fc;
         padding: 0.16rem 0.8rem 0.16rem 0.16rem;
     }

     .progress-box {
         float: left;
     }

     .progress {
         position: relative;
         /*width: 3rem;*/
         width: 100%;
         height: 0.06rem;
         background-color: #8ed1bb;
         -webkit-border-radius: 0.05rem;
         -moz-border-radius: 0.05rem;
         border-radius: 0.05rem;
         margin-top: 0.22rem;
         cursor: pointer;
         display: none;
     }

     .bar {
         display: inline-block;
         position: absolute;
         top: 0;
         left: 0;
         width: 0;
         height: 100%;
         background: #fff;
         -webkit-border-radius: 0.05rem;
         -moz-border-radius: 0.05rem;
         border-radius: 0.05rem;
     }

     .control {
         position: absolute;
         left: -0.04rem;
         top: -0.04rem;
         width: 0.14rem;
         height: 0.14rem;
         background: #fff;
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         border-radius: 50%;
         z-index: 99;
     }

     .control:before {
         content: '';
         position: absolute;
         right: -0.04rem;
         top: -0.04rem;
         width: 0.22rem;
         height: 0.22rem;
         background: rgba(255, 255, 255, 0.3);
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         border-radius: 50%;
     }

     .audio-switch {
         float: left;
     }

     .switch-btn {
         position: relative;
         float: left;
         width: 0.5rem;
         height: 0.5rem;
         margin-right: 0.2rem;
         cursor: pointer;
     }

     .switch-pause {
         background-position: -2.96rem 0;
     }

     .switch-play {
         background-position: -3.6rem -0.5rem;
     }

audio-spirit.png是精灵图，上面动态图中播放按钮以及暂停按钮都是根据该图定位获得的。因此，假如运行代码后没有看到按钮，只需自己找两张播放和暂停的图片就可以了。

audio.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
$(function () {
  		//点击按钮，播放音频
       $(".audio-list").on("click", ".audio-switch", function () {
           var myAudio = $(this).parents(".audio-box").find("audio")[0];
           if (myAudio.paused) {
               myAudio.play();
               $("audio").each(function (index, ele) {
                   var audioBox = $(this).parents(".audio-box");
                   if (ele === myAudio) {
                       myAudio.play();
                       audioBox.find(".switch-btn").removeClass('switch-pause').addClass('switch-play');
                       audioBox.find(".progress").show()
                   } else if ($(ele).attr("id") != "tryoutAudio") {
                       ele.pause();
                       audioBox.find(".switch-btn").removeClass('switch-play').addClass('switch-pause');
                       audioBox.find(".progress").hide();
                       ele.currentTime = "0";
                   }
               })
           } else {
               myAudio.pause();
               $(this).find(".switch-btn").removeClass('switch-play').addClass('switch-pause');
           }
       })

       function playNextAudio() {
         //音频进度条更新
           $("audio").on("timeupdate", function () {
               var currentAudio = this;
               var scales = this.currentTime / this.duration;
               var bar = $(this).parents(".audio-box").find(".bar")[0];
               var progress = $(this).parents(".audio-box").find(".progress")[0];
               var control = $(this).parents(".audio-box").find(".control")[0];
               bar.style.width = progress.offsetWidth * scales / 100 + "rem";
               control.style.left = progress.offsetWidth * scales / 100 - 0.04 + "rem";
               control.ontouchstart = function (e) {
                   var startPosition = (e || window.event).touches[0].clientX;
                   var l = this.offsetLeft;
                   var max = progress.offsetWidth - this.offsetWidth;
                   control.ontouchmove = function (e) {
                       var endPosition = (e || window.event).touches[0].clientX;
                       var distance = Math.min(max, Math.max(-2, l + (endPosition - startPosition)));
                       control.style.left = distance + 'px';
                       bar.style.width = distance + 'px';
                       var scales = control.offsetLeft / progress.offsetWidth;
                       currentAudio.currentTime = currentAudio.duration * scales;

                       //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
                       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                   };
                   control.ontouchend = new Function('this.onmousemove=null');   //弹起鼠标不做任何操作
               }
           })


           // 获取所有audio音频标签
           var audioArray = [];
           $("audio").each(function (index, ele) {
               $(ele).data("id", "audio" + index);
               audioArray.push(ele);
           })
         
         //监听“ended”事件，让下一个音频标签自动播放
           $("audio").on("ended", function () {
               $(this).parents(".audio-send-box").find(".switch-btn").removeClass('switch-play').addClass('switch-pause');
               $(this).parents(".audio-send-box").find(".progress").hide();
               $(this).parents(".audio-send-box").find(".no-play-flag").hide();
               var audioId = $(this).data("id");
               // 获取audioId中的数字，即索引
               var currentIndex = audioId.replace(/[^0-9]/ig, "");
               var lastIndex = Number(currentIndex) + 1;
             
             //让页面自动滚动到当前播放音频显示的位置
               var scrollHeight = $(audioArray[lastIndex]).parents(".audio-list-item").position().top;
                   $('.audio-liveroom').scrollTop(scrollHeight);
             
             		//解决ios不能自动触发play()方法的问题
                   if (window.WeixinJSBridge) {
                       WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                           audioArray[lastIndex].play();
                       }, false);
                   } else {
                       document.addEventListener("WeixinJSBridgeReady", function () {
                           WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                               audioArray[lastIndex].play();
                           });
                       }, false);
                   }
                   audioArray[lastIndex].play();
                   $(audioArray[lastIndex]).parents(".audio-send-box").find(".switch-btn").removeClass('switch-pause').addClass('switch-play');
                   $(audioArray[lastIndex]).parents(".audio-send-box").find(".progress").show();
           })
       }

       playNextAudio();

       //        计算音频播放的长度
       function getWidth(timeLength, maxTimeLength) {
           var maxWidth = 3;
           var rate = parseFloat(timeLength / maxTimeLength);
           var progressWidth = rate * maxWidth;
           if (progressWidth > maxWidth) {
               return maxWidth;
           } else {
               return progressWidth;
           }
       }

       var progressBox = $("audio").parent(".audio-box").find(".progress-box");
       progressBox.css({width: getWidth(60, 60) + 'rem'});

   })

难点：ios上audio不能自动播放，也不能连续播放的问题

为了避免浪费流量，ios手机端浏览器默认规定媒体文件不允许自动加载播放。 必须在由用户直接操作的事件(如click事件)中才能执行加载播放的代码语句。

解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        audioArray[lastIndex].play();
     }, false);
} else {
     document.addEventListener("WeixinJSBridgeReady", function () {
         WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            audioArray[lastIndex].play();
         });
     }, false);
}
audioArray[lastIndex].play();

remauto.js

这个js文件是js自适应rem的，对于移动端开发一般使用rem为单位。

1
2
3
4
5
6
7
8
(function () {
    function initFont() {
    	document.getElementById('viewport').setAttribute('content','width=device-width,initial-scale=1,user-scalable=no,width=750,maximum-scale='+window.screen.width/750);
        document.documentElement.style.fontSize = (document.documentElement.clientWidth > 750 ? 750 : document.documentElement.clientWidth) / 7.5 + "px";
    }
    initFont();
   	window.onresize=function(){initFont()};
})(window);
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Whittney <br>我就是我，不一眼的烟火！*_*<br><br>