Js imitation WeChat speech playback Implementation ideas, js imitation speech ideas

Js speech-like playback Implementation ideas and js speech-like ideas

Recently, I saw a service number called "Light customer partner", which is well operated.
It is used for online English training. Teachers can record speech, assign texts, and make courses.

It took a lot of time to write most of the functions, but it has not been optimized into a plug-in. It is hard to get the code directly and it is difficult to apply it. So let's focus on the Implementation ideas.
My html structure is like this.

<Div class = "app-voice-you" voiceSrc = "xx.mp3">  <div style =" width: 60%; "class =" app-voice-state-bg "> <div class =" app-voice-state app-voice-pause "> </div> <div class = "app-voice-time app-voice-unread"> 1 '6 "</div> <! -- Voice playback control --> <audio id = "audio_my" src = ""> Your browser does not support the audio tag. </audio>

The core function is voice playback. It mainly includes the following features:

The red dot indicates that the voice is not heard. After the voice is heard, the red dot disappears;

Remove the unread style from the read status. It can be done with local storage processing.

// This is the documentvar app_voice_time = this. getElementsByClassName ("app-voice-time") [0]; if (app_voice_time.className.indexOf ("app-voice-unread") of the clicked voice ")! =-1) {// If a red dot exists, delete app_voice_time.className = app_voice_time.className.replace ("app-voice-unread ","");}

When you listen to the voice for the first time, the next speech is automatically played;

Here we mainly use the HTML5 audio control's "audio playback complete" Event
After the voice is played, find the next voice and play the next voice.

// Audio playback event (PAGE. audio is the document of the audio control) PAGE. audio. addEventListener ('enabled', function () {// obtain the next node PAGE cyclically. preVoice = PAGE. currentVoice; var currentVoice = PAGE. currentVoice; while (true) {currentVoice = currentVoice. nextElementSibling; // The next sibling node // 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; // obtain the next voice node and play the PAGE. audio. src = voiceSrc; PAGE. audio. play (); PAGE. event_PlayVoice () ;}, false );

Each Voice Segment can be paused, played again, or played again;

This is relatively simple, but it is also a lot of logic. You need to change the style to tell you how to resume/replay the video.

There is an animation in the playing voice. If it is not in the playing voice, the animation will be stopped.

Here we mainly use CSS3 animation.

. 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 {/* never played */background-position: 0px-39px ;}. app-voice-you. app-voice-play {/* Playing (transition animation not required) */background-position: 0px-39px;-webkit-animation: voiceplay 1 s infinite step-start; -moz-animation: voiceplay 1 s infinite step-start;-o-animation: voiceplay 1 s infinite step-start; animation: voiceplay 1 s 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 ;}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.