我的html結構是這樣的
class="app-voice-you" voiceSrc="xx.mp3">
class="app-voice-headimg" src="xx.png" />
style="width: 60%;" class="app-voice-state-bg">
class="app-voice-state app-voice-pause">
class="app-voice-time app-voice-unread">
1'6"
id="audio_my" src="">
Your browser does not support the audio tag.
核心功能就是語音播放，主要包括了以下幾個功能點：
紅點表明未聽語音，語音聽過後，紅點會消失;
將「未讀」狀態的樣式獨立出來，「已讀」的時候，把樣式刪除就行。結合本地存儲處理就搞定了。
//this是點擊的語音的document
var app_voice_time = this.getElementsByClassName("app-voice-time")[0];
if(app_voice_time.className.indexOf("app-voice-unread") != -1){
//存在紅點時，把紅點樣式刪除
app_voice_time.className = app_voice_time.className.replace("app-voice-unread","");
}
第一次聽語音，會自動播放下一段語音;
這里主要是使用HTML5的audio控制項的「語音播放完」事件
語音播放完，找到下一個語音，播放下一個語音
//語音播放完事件(PAGE.audio是audio控制項的document)
PAGE.audio.addEventListener('ended', function () {
//循環獲取下一個節點
PAGE.preVoice = PAGE.currentVoice;
var currentVoice = PAGE.currentVoice;
while(true){
currentVoice = currentVoice.nextElementSibling;//下一個兄弟節點
//已經到達最底部
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;
//獲取得到下一個語音節點，播放
PAGE.audio.src = voiceSrc;
PAGE.audio.play();
PAGE.Event_PlayVoice();
}, false);
每段語音可以暫停、繼續播放、重新播放;
這個比較簡單，但是也是比較多邏輯。需要變換樣式告訴用戶，怎樣是繼續播放/重新播放。
播放中的語音有動畫，不是播放中的語音則會停止動畫。
這里主要是CSS3動畫的應用
.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{
/*播放中（不需要過渡動畫）*/
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;
}
}
⑵ 用JS和html怎麼做出一個簡單的聊天窗口（類似微信）
單純js和html無法實現通訊，需要搭建後台服務與前端WebSocket比較容易實現。
⑶ 如何在網頁端實現一個仿微信的聊天窗口
其實那個來二維碼就是一個網源址，你掃描完，手機就發送了一個http請求，這個GET請求發送一些數據給微信的伺服器，微信收到這個請求校驗以後就返回到手機，手機上出現一個確認頁面，點擊以後在伺服器完成鑒權，然後在web端更新頁面（看樣子web有個監聽是否完成請求的js?）
⑷ Auto.js-實現微信自動回復消息
最近閑下來，剛好朋友叫我研究一下auto.js，然後就抽空看了下Api，寫了一個基於Auto.js的微信自動回復消息的腳本。
實現思路如下。
1.打開微信，點擊"微信"按鈕選中列表界面
2.截圖，然後找到截圖中紅色的小點
3.點擊小紅點那個item進入聊天
4.自動回復消息
5.返回到微信聊天列表界面
⑸ javascript怎麼將從後台獲取的二進制流轉化成音頻，我做的是仿微信聊天自動回復。
二進制流一般也不能保存到前台吧，播放完成後就結束了，即使能夠記憶專到前台，也一定屬是直接存放入頁面的某個屬性內，這會增加頁面的大小，帶來一些性能問題，而微信這個業務場景很明顯是有聊天記錄的，需要能夠重復播放以前的聊天記錄，你可以直接在後台生成音頻的URL地址，前台調用鏈接地址的音頻即可。