移動端語音播放以及語音條拖動的實現
阿新 • • 發佈：2019-01-21
移動端語音播放，包含了語音播放動態小喇叭，語音條，時間長度，支援移動端觸動拖動，不支援PC拖動。
類似於微信公眾號裡面的語音播放，效果如下：
進入頁面：
播放時：
頁面程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>閱讀詳情</title> <link rel="stylesheet" type="text/css" href="css/read-detail.css"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="audio.css"> </head> <body> <div class="nav"> <a href="" class="return"></a> <a href="" class="close">關閉</a> <p>《靠譜》</p> </div> <div class="voice"> <div class="gif"> <img id="images" src="images/static.png" alt="" onclick=""> <audio controls="controls" preload="auto" id='audio' src="music.mp3" hidden="true"></audio> </div> <div class="right"> <p>聽讀：第五幕</p> <div id="touchline" class="speed"> <div class="timeline"> <div class="circle"> </div> </div> </div> <div class="num"> <span class="currentTime">00:00</span> <span class="timeAll">00:00</span> </div> </div> </div> <div class="content"> <p>但是因為濾鏡的相容性問題，最好是不要用，你可以用ps做圖的時候，把背景調一下透明度後導成png格式的圖片就行了</p> <p>如果透明的背景顏色一樣的話，那麼你可以切成1px*1px大小的png圖片平鋪，gif只支援透明度100%也就是完全透明的圖片</p> <p>半透明的不支援，而png格式的圖片則不存在什麼問題</p> <p>唯一會有問題的地方就只是IE6不相容透明png格式而已，我的百度空間有解決IE6透明的問題</p> </div> <div class="bottom"> <div class="left"> <a href="#"> <span></span> 上一章 </a> </div> <div class="center"> <a href="#"> <i></i> 目錄 </a> </div> <div class="right"> <a href="#"> 下一章 <b></b> </a> </div> </div> </body> <script type="text/javascript" src="jquery.1.9.1.min.js"></script> <script> $(document).ready(function(){ <!-- var ProcessNow = 0; --> var audio = document.getElementById("audio"); //當媒體載入完成後，自動將媒體的時間長度自動更新到頁面 audio.addEventListener('loadedmetadata', function () { $(".timeAll").html(timeFormat(audio.duration)); }, true); audio.addEventListener("canplaythrough", function() { $(".timeAll").html(timeFormat(audio.duration)); }, false); //點選圖片觸發播放或者暫停狀態 $("#images").on('click',function(){ if(audio.paused){ Play(); }else{ Pause(); } }) var lineStart = $("#touchline").offset().left; var lineWidth = $("#touchline").width(); var lineEnd = lineStart+lineWidth; var currentTime = audio.currentTime; var timeAll = audio.duration; //監聽音訊播放完畢事件 audio.addEventListener('ended', function () { document.getElementById("images").src="images/static.png"; }, false); //音訊開始播放方法 function Play() { audio.play(); document.getElementById("images").src="images/voice.gif"; TimeSpan(); } //音訊暫停播放 function Pause() { audio.pause(); document.getElementById("images").src="images/static.png"; } //Pause() //使用setInterval重複讀取播放時間進度，從而更新進度條 function TimeSpan() { var playload = setInterval(function () { currentTime = audio.currentTime; timeAll = audio.duration; console.log(currentTime); var ProcessNow = (currentTime / timeAll) * lineWidth; $(".circle").css("width", ProcessNow); var currentTimeFm = timeFormat(currentTime); var timeAllFm = timeFormat(timeAll); $(".currentTime").html(currentTimeFm); $(".timeAll").html(timeAllFm); //觸發setInterval停止迴圈，然後將時間和進度條初始化 if(currentTime >= timeAll){ $(".circle").css("width", 0); $(".currentTime").html("00:00"); console.log(11111); clearInterval(playload); } }, 1000); } //將獲取的時間格式化 function timeFormat(number) { var minute = parseInt(number / 60); var second = parseInt(number % 60); minute = minute >= 10 ? minute : "0" + minute; second = second >= 10 ? second : "0" + second; return minute + ":" + second; } //手勢監聽事件touchline var x;//觸控的位置 var scale;//音訊播放的百分比 var touchline = document.getElementById("touchline"); touchline.addEventListener('touchstart', function(evt) { if(audio.pause||audio.ended){ Play(); } var touch=evt.touches[0]; x=parseInt(touch.pageX); if(x<lineStart){ x = lineStart; } scale = (x - lineStart)/lineWidth; audio.currentTime = scale * audio.duration; }, true); touchline.addEventListener("touchmove",function(evt){ evt.preventDefault(); var touch=evt.touches[0]; x=parseInt(touch.pageX); if(x>lineEnd){ x = lineEnd; } scale = (x - lineStart)/lineWidth; $(".circle").css("width", scale*lineWidth); },true) touchline.addEventListener("touchend",function(evt){ audio.currentTime = scale * audio.duration; touchline.addEventListener("touchmove",null); },true) }) </script> </html>
資源地址：http://download.csdn.net/download/qq_20565303/10031782