移动端语音播放以及语音条拖动的实现
生活随笔
收集整理的這篇文章主要介紹了
移动端语音播放以及语音条拖动的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
移動端語音播放，包含了語音播放動態小喇叭，語音條，時間長度，支持移動端觸動拖動，不支持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="" οnclick=""><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;}//手勢監聽事件touchlinevar 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
總結
以上是生活随笔為你收集整理的移动端语音播放以及语音条拖动的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cydia崩溃错误修复
- 下一篇： php教程 英文原版,PHP 7 Qui