js仿微信語(yǔ)音播放實(shí)現(xiàn)思路
最近看到有一個(gè)叫做“輕客小伙伴”的微信服務(wù)號(hào),運(yùn)營(yíng)得挺不錯(cuò)的。
它是做英語(yǔ)線上培訓(xùn)的,由老師錄制語(yǔ)音,配上圖文,制作成課程。
花了不少時(shí)間寫(xiě)了大多數(shù)功能,但還沒(méi)有優(yōu)化成插件,直接發(fā)代碼估計(jì)也看不懂,難應(yīng)用。所以就主要說(shuō)下實(shí)現(xiàn)的思路。
我的html結(jié)構(gòu)是這樣的
<div class="app-voice-you" voiceSrc="xx.mp3"> <img class="app-voice-headimg" src="xx.png" /> <div style="width: 60%;" class="app-voice-state-bg"> <div class="app-voice-state app-voice-pause"></div> </div> <div class="app-voice-time app-voice-unread"> 1'6" </div> </div> <!--語(yǔ)音播放控件--> <audio id="audio_my" src=""> Your browser does not support the audio tag. </audio>
核心功能就是語(yǔ)音播放,主要包括了以下幾個(gè)功能點(diǎn):
紅點(diǎn)表明未聽(tīng)語(yǔ)音,語(yǔ)音聽(tīng)過(guò)后,紅點(diǎn)會(huì)消失;
將“未讀”狀態(tài)的樣式獨(dú)立出來(lái),“已讀”的時(shí)候,把樣式刪除就行。結(jié)合本地存儲(chǔ)處理就搞定了。
//this是點(diǎn)擊的語(yǔ)音的document var app_voice_time = this.getElementsByClassName("app-voice-time")[0]; if(app_voice_time.className.indexOf("app-voice-unread") != -1){ //存在紅點(diǎn)時(shí),把紅點(diǎn)樣式刪除 app_voice_time.className = app_voice_time.className.replace("app-voice-unread",""); }
第一次聽(tīng)語(yǔ)音,會(huì)自動(dòng)播放下一段語(yǔ)音;
這里主要是使用HTML5的audio控件的“語(yǔ)音播放完”事件
語(yǔ)音播放完,找到下一個(gè)語(yǔ)音,播放下一個(gè)語(yǔ)音
//語(yǔ)音播放完事件(PAGE.audio是audio控件的document) PAGE.audio.addEventListener('ended', function () { //循環(huán)獲取下一個(gè)節(jié)點(diǎn) PAGE.preVoice = PAGE.currentVoice; var currentVoice = PAGE.currentVoice; while(true){ currentVoice = currentVoice.nextElementSibling;//下一個(gè)兄弟節(jié)點(diǎn) //已經(jīng)到達(dá)最底部 if(!currentVoice){ PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause"; return false; } var voiceSrc = currentVoice.getAttribute("voiceSrc"); if(voiceSrc && voiceSrc != ""){ break; } } if(!PAGE.autoNextVoice){ PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause"; return false; } PAGE.currentVoice = currentVoice; //獲取得到下一個(gè)語(yǔ)音節(jié)點(diǎn),播放 PAGE.audio.src = voiceSrc; PAGE.audio.play(); PAGE.Event_PlayVoice(); }, false);
每段語(yǔ)音可以暫停、繼續(xù)播放、重新播放;
這個(gè)比較簡(jiǎn)單,但是也是比較多邏輯。需要變換樣式告訴用戶,怎樣是繼續(xù)播放/重新播放。
播放中的語(yǔ)音有動(dòng)畫(huà),不是播放中的語(yǔ)音則會(huì)停止動(dòng)畫(huà)。
這里主要是CSS3動(dòng)畫(huà)的應(yīng)用
.app-voice-pause,.app-voice-play{ height: 18px; background-repeat: no-repeat; background-image: url(../img/voice.png); background-size: 18px auto; opacity: 0.5; } .app-voice-you .app-voice-pause{ /*從未播放*/ background-position: 0px -39px; } .app-voice-you .app-voice-play{ /*播放中(不需要過(guò)渡動(dòng)畫(huà))*/ background-position: 0px -39px; -webkit-animation: voiceplay 1s infinite step-start; -moz-animation: voiceplay 1s infinite step-start; -o-animation: voiceplay 1s infinite step-start; animation: voiceplay 1s infinite step-start; } @-webkit-keyframes voiceplay { 0%, 100% { background-position: 0px -39px; } 33.333333% { background-position: 0px -0px; } 66.666666% { background-position: 0px -19.7px; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js鼠標(biāo)按鍵事件和鍵盤按鍵事件用法實(shí)例匯總
這篇文章主要介紹了js鼠標(biāo)按鍵事件和鍵盤按鍵事件用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)鼠標(biāo)與鍵盤事件的常用操作技巧,需要的朋友可以參考下2016-10-10js復(fù)制文本到粘貼板(Clipboard.writeText())
這篇文章主要介紹了js復(fù)制文本到粘貼板(Clipboard.writeText()),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07webpack項(xiàng)目輕松混用css module的方法
這篇文章主要介紹了webpack項(xiàng)目輕松混用css module的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟
本文主要介紹了uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09關(guān)閉瀏覽器時(shí)提示onbeforeunload事件
這篇文章主要介紹了關(guān)閉瀏覽器時(shí)提示onbeforeunload事件,有需要的朋友可以參考一下2013-12-12ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla
使特定于 Internet Explorer 的 Web 應(yīng)用程序在 Mozilla 上運(yùn)行時(shí),您遇到過(guò)麻煩嗎?本文討論了將應(yīng)用程序遷移到基于開(kāi)源 Mozilla 瀏覽器上時(shí)的常見(jiàn)問(wèn)題。首先討論跨瀏覽器開(kāi)發(fā)的基本技術(shù),然后介紹克服 Mozilla 和 Internet Explorer 之間差異的策略。2008-04-04js數(shù)字轉(zhuǎn)中文兩種實(shí)現(xiàn)方法
在前端開(kāi)發(fā)中有時(shí)候會(huì)需要到將阿拉伯?dāng)?shù)字轉(zhuǎn)化為中文,當(dāng)前做個(gè)記錄,提供自己之后翻閱,這篇文章主要給大家介紹了關(guān)于js數(shù)字轉(zhuǎn)中文兩種實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2023-10-10JS中獲取 DOM 元素的絕對(duì)位置實(shí)例詳解
這篇文章主要介紹了JS中獲取 DOM 元素的絕對(duì)位置,詳細(xì)介紹了各種獲取dom元素絕對(duì)位置的方法及對(duì)應(yīng)的兼容性,需要的朋友參考下吧2018-04-04