效果圖
前台大體呈現效果圖如下：
點擊就可以播放mp3格式的錄音。點擊另外一個錄音，當前錄音停止！
思路
關於播放動畫，這個很簡單，我們可以用css3的逐幀動畫來實現。關於逐幀動畫，我之前的文章也寫過：http://www.haorooms.com/post/zhuzhen_dh
圖片如下：
除了動畫之外，剩下的就是js對audio的控制了。
html5 audio
關於html5 audio標簽，有很多屬性，大家可以搜索一下，例如preload、autoplay、loop、controls等等。讓其隱藏，我們可以添加一個隱藏參數，代碼如下：
<audio preload="auto" hidden="true"><source src="mp3/Kalimba.mp3" type="audio/mpeg"></audio>
這樣，這個audio 就可以隱藏顯示，接下來我們就可以用js對其進行操作控制了。
audio常用方法
addTextTrack() 向音頻/視頻添加新的文本軌道 canPlayType() 檢測瀏覽器是否能播放指定的音頻/視頻類型 load() 重新加載音頻/視頻元素 play() 開始播放音頻/視頻 pause() 暫停當前播放的音頻/視頻
audio常用事件
事件對我們非常有用，可以通過判斷音頻是否加載完成，來進行動畫的操作，例如，我們點擊錄音，先有一個加載loading動畫，然后在變成我們前面所講的逐幀動畫。
abort 當音頻/視頻的加載已放棄時 canplay 當瀏覽器可以播放音頻/視頻時 canplaythrough 當瀏覽器可在不因緩沖而停頓的情況下進行播放時 durationchange 當音頻/視頻的時長已更改時 emptied 當目前的播放列表為空時 ended 當目前的播放列表已結束時 error 當在音頻/視頻加載期間發生錯誤時 loadeddata 當瀏覽器已加載音頻/視頻的當前幀時 loadedmetadata 當瀏覽器已加載音頻/視頻的元數據時 loadstart 當瀏覽器開始查找音頻/視頻時 pause 當音頻/視頻已暫停時 play 當音頻/視頻已開始或不再暫停時 playing 當音頻/視頻在已因緩沖而暫停或停止后已就緒時 progress 當瀏覽器正在下載音頻/視頻時 ratechange 當音頻/視頻的播放速度已更改時 seeked 當用戶已移動/跳躍到音頻/視頻中的新位置時 seeking 當用戶開始移動/跳躍到音頻/視頻中的新位置時 stalled 當瀏覽器嘗試獲取媒體數據，但數據不可用時 suspend 當瀏覽器刻意不獲取媒體數據時 timeupdate 當目前的播放位置已更改時 volumechange 當音量已更改時 waiting 當視頻由於需要緩沖下一幀而停止
例如如下代碼：
audio.onloadedmetadata = function () {
$(_this).removeClass("loading");
$(_this).addClass("playing");
}
當音頻文件已經加載到瀏覽器之后，去除加載動畫，增加播放動畫。
js 操作音頻文件播放暫停
如下代碼可以控制audio播放還是暫停
var audio = document.getElementById('haorooms'); if(audio!==null){ //檢測播放是否已暫停.audio.paused 在播放器播放時返回false. alert(audio.paused); if(audio.paused) { audio.play();//audio.play();// 這個就是播放 }else{ audio.pause();// 這個就是暫停 } }
當然也可以通過jquery輕松操作！
var audio = $(that).children("audio")[0];//獲取，這段代碼直接從我們文件中copy而來，可以直接寫$("audio")[0] audio.load();//加載 audio.play();//播放 audio.pause();//暫停
值得注意的是，我們可以用定時器來讓語音播放結束之后，動畫去掉。
定時器可以用setTimeout來寫！關於setTimeout，可以看我之前的文章！
定時器是一個變量！
var second=$(that).data("second");//獲取音頻秒數 _this.dshiqi=setTimeout(function(){ //dshiqi是外層定義好的一個變量！ $(that).removeClass("playing");//播放完畢去除動畫 },second*1000)
記得在每次切換點擊的時候，清除之前的定時器
clearTimeout(_this.dshiqi);
不清除定時器，來回點擊錄音，會有問題！
上面就是對html5的audio實現高仿微信語音播放效果簡單總結，歡迎留言交流！