亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js仿微信語(yǔ)音播放實(shí)現(xiàn)思路

 更新時(shí)間:2016年12月12日 14:54:58   作者:鄉(xiāng)下程序員  
這篇文章主要為大家詳細(xì)介紹了js仿微信語(yǔ)音播放的實(shí)現(xiàn)思路,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

最近看到有一個(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)按鍵事件和鍵盤按鍵事件用法實(shí)例匯總

    這篇文章主要介紹了js鼠標(biāo)按鍵事件和鍵盤按鍵事件用法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)鼠標(biāo)與鍵盤事件的常用操作技巧,需要的朋友可以參考下
    2016-10-10
  • js復(fù)制文本到粘貼板(Clipboard.writeText())

    js復(fù)制文本到粘貼板(Clipboard.writeText())

    這篇文章主要介紹了js復(fù)制文本到粘貼板(Clipboard.writeText()),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • webpack項(xiàng)目輕松混用css module的方法

    webpack項(xiàng)目輕松混用css module的方法

    這篇文章主要介紹了webpack項(xiàng)目輕松混用css module的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟

    uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟

    本文主要介紹了uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • javascript實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的圖片

    javascript實(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事件

    這篇文章主要介紹了關(guān)閉瀏覽器時(shí)提示onbeforeunload事件,有需要的朋友可以參考一下
    2013-12-12
  • ibm官方資料把應(yīng)用程序從 Internet Explorer 遷移到 Mozilla

    ibm官方資料把應(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-04
  • js數(shù)字轉(zhuǎn)中文兩種實(shí)現(xiàn)方法

    js數(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-10
  • JS中獲取 DOM 元素的絕對(duì)位置實(shí)例詳解

    JS中獲取 DOM 元素的絕對(duì)位置實(shí)例詳解

    這篇文章主要介紹了JS中獲取 DOM 元素的絕對(duì)位置,詳細(xì)介紹了各種獲取dom元素絕對(duì)位置的方法及對(duì)應(yīng)的兼容性,需要的朋友參考下吧
    2018-04-04
  • 詳解webpack解惑:require的五種用法

    詳解webpack解惑:require的五種用法

    這篇文章主要介紹了詳解webpack解惑:require的五種用法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-06-06

最新評(píng)論