1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/>
6 <link rel="shortcut icon" href="img/logo.png">
7 <title>html5 audio音频播放</title>
8 <style>
9 *{ margin: 0; padding:0;}
10 body{-webkit-tap-highlight-color: rgba(0,0,0,0); font-family: "微软雅黑"}
11 h1{ width: 100%; font-size: 1.5em; text-align: center; line-height: 3em; color:#47c9af; }
12 #audio{ width: 100%;}
13 #control{ width: 150px; height: 150px; line-height: 150px; text-align: center; border-radius: 200px; border:none; color:#fff; margin-top: -75px; margin-left:-75px; left:50%; top:50%; position: absolute; box-shadow: #888 0 0 8px;}
14 .color_gray{ background: #e4e4e4}
15 .hide{ display: none;}
16 .show{ display: block;}
17 .play{ background: #f06060;}
18 .pause{ background:skyblue}
19 /*进度条样式*/
20 .progressBar{ width: 100%; height: 10px;margin: 30px auto 30px auto; position:absolute; left: 0; bottom: 35px;}
21 .progressBar div{ position: absolute;}
22 .progressBar .progressBac{ width: 100%; height: 10px; left: 0; top:0; background: #e4e4e4;}
23 .progressBar .speed{width: 100%; height: 10px; left: -100%; background: #f06060; }
24 .progressBar .drag{ width: 30px; height: 30px; left: 0; top:-10px; background: skyblue; opacity: 0.8; border-radius: 50px; box-shadow: #fff 0 0 5px;}
25 /*时间样式*/
26 #time{ width: 100%; height: 20px;position: absolute; left: 0; bottom:30px; color:#888;}
27 .tiemDetail{ position: absolute; right:10px; top:0;}
28 #songInfo{overflow: hidden; width: 200px; height:50px; line-height: 50px; text-align: center; color:#34495e; margin-top: -25px; margin-left:-100px; left:50%; top:70%; position: absolute;}
29 .shareImg{ position: absolute; left: 100000px;}
30 </style>
31 </head>
32
33 <body>
34 <script>
35 $(function() {
36 getSong();
37 })
38
39 //获取歌曲链接并插入dom中
40 function getSong() {
41 var audio = document.getElementById("audio");
42 audio.src = "http://frontman.qiniudn.com/songnotime.mp3";
43 audio.loop = true; //歌曲循环
44 playCotrol(); //播放控制函数
45
46 }
47
48 //点击播放/暂停
49 function clicks() {
50 var audio = document.getElementById("audio");
51 $("#control").click(function() {
52 if ($("#control").hasClass("play")) {
53 $("#control").addClass("pause").removeClass("play");
54 audio.play();//开始播放
55 dragMove();//并且滚动条开始滑动
56 $("#control").html("暂停播放");
57 } else {
58 $("#control").addClass("play").removeClass("pause");
59 $("#control").html("点击播放");
60 audio.pause();
61 }
62 })
63 }
64
65 //播放时间
66 function timeChange(time, timePlace) {//默认获取的时间是时间戳改成我们常见的时间格式
67 var timePlace = document.getElementById(timePlace);
68 //分钟
69 var minute = time / 60;
70 var minutes = parseInt(minute);
71 if (minutes < 10) {
72 minutes = "0" + minutes;
73 }
74 //秒
75 var second = time % 60;
76 seconds = parseInt(second);
77 if (seconds < 10) {
78 seconds = "0" + seconds;
79 }
80 var allTime = "" + minutes + "" + ":" + "" + seconds + ""
81 timePlace.innerHTML = allTime;
82 }
83
84 //播放事件监听
85 function playCotrol() {
86 audio.addEventListener("loadeddata", //歌曲一经完整的加载完毕( 也可以写成上面提到的那些事件类型)
87 function() {
88 $("#control").addClass("play").removeClass("color_gray");
89 $("#control").html("点击播放");
90 addListenTouch(); //歌曲加载之后才可以拖动进度条
91 var allTime = audio.duration;
92 timeChange(allTime, "allTime");
93 setInterval(function() {
94 var currentTime = audio.currentTime;
95 $("#time .currentTime").html(timeChange(currentTime, "currentTime"));
96 }, 1000);
97 clicks();
98 }, false);
99
100 audio.addEventListener("pause",
101 function() { //监听暂停
102 $("#control").addClass("play").removeClass("pause");
103 $("#control").html("点击播放");
104 if (audio.currentTime == audio.duration) {
105 audio.stop();
106 audio.currentTime = 0;
107 }
108 }, false);
109 audio.addEventListener("play",
110 function() { //监听暂停
111 $("#control").addClass("pause").removeClass("play");
112 $("#control").html("暂停播放");
113 dragMove();
114 }, false);
115 audio.addEventListener("ended", function() {
116 alert(0)
117 }, false)
118 }
119
120 //进度条
121 这里我用的是事件实现进度拖动 如果不太熟悉touch的可以看下我之前写的一个小demo http://www.cnblogs.com/leinov/p/3701951.html
122 var startX, x, aboveX = 0; //触摸时的坐标 //滑动的距离 //设一个全局变量记录上一次内部块滑动的位置
123
124 //1拖动监听touch事件
125 function addListenTouch() {
126 document.getElementById("drag").addEventListener("touchstart", touchStart, false);
127 document.getElementById("drag").addEventListener("touchmove", touchMove, false);
128 document.getElementById("drag").addEventListener("touchend", touchEnd, false);
129 var drag = document.getElementById("drag");
130 var speed = document.getElementById("speed");
131 }
132
133 //touchstart,touchmove,touchend事件函数
134 function touchStart(e) {
135 e.preventDefault();
136 var touch = e.touches[0];
137 startX = touch.pageX;
138 }
139 function touchMove(e) { //滑动
140 e.preventDefault();
141 var touch = e.touches[0];
142 x = touch.pageX - startX; //滑动的距离
143 //drag.style.webkitTransform = ‘translate(‘ + 0+ ‘px, ‘ + y + ‘px)‘; //也可以用css3的方式
144 drag.style.left = aboveX + x + "px"; //
145 speed.style.left = -((window.innerWidth) - (aboveX + x)) + "px";
146 }
147 function touchEnd(e) { //手指离开屏幕
148 e.preventDefault();
149 aboveX = parseInt(drag.style.left);
150 var touch = e.touches[0];
151 var dragPaddingLeft = drag.style.left;
152 var change = dragPaddingLeft.replace("px", "");
153 numDragpaddingLeft = parseInt(change);
154 var currentTime = (numDragpaddingLeft / (window.innerWidth - 30)) * audio.duration;//30是拖动圆圈的长度，减掉是为了让歌曲结束的时候不会跑到window以外
155 audio.currentTime = currentTime;
156 }
157 //3拖动的滑动条前进
158 function dragMove() {
159 setInterval(function() {
160 drag.style.left = (audio.currentTime / audio.duration) * (window.innerWidth - 30) + "px";
161 speed.style.left = -((window.innerWidth) - (audio.currentTime / audio.duration) * (window.innerWidth - 30)) + "px";
162 }, 500);
163 }
164 </script>
165
166 <h1>html5 audio 音频播放demo</h1>
167
168 <!--audiostart-->
169 <audio id="audio" src="" loop="loop" autoplay="autoplay" ></audio>
170 <!--audio End-->
171
172
173
174 <!--播放控制按钮start-->
175 <button id="control" class="">loading</button>
176 <!--播放控制按钮end-->
177
178 <!--时间进度条块儿start-->
179 <section class="progressBar">
180 <div class="progressBac"></div>
181 <div class="speed" id="speed"></div>
182 <div class="drag" id="drag"></div>
183 </section>
184 <!--时间进度条块儿end-->
185
186 <!--播放时间start-->
187 <div id="time"><div class="tiemDetail"><span class="currentTime" id="currentTime">00:00</span>/<span class="allTime" id="allTime">00:00</span></div></div>
188 <!--播放时间end-->
189 <!--歌曲信息start-->
190 <div id="songInfo">没时间-Leinov<div class="shareImg"><img src="img/html5audio.jpg" alt=""></div></div>
191 <!--歌曲信息end-->
192 <script src="js/zepto.js"></script>
193 </body>
194 </html>
