非angular情況單數據播放：
var audio =document.createElement("audio");
audio.src=me.global.res+audioObj.src;?
//audioObj是方法傳入的參數對象，me.global.res是音頻前綴
audio.play();
audio.addEventListener("play",
function() {//監聽開始和結束
$(".voice span").addClass("audio-play");
},false);
audio.addEventListener("ended",function() {
$(".voice span").removeClass("audio-play").addClass("voice3");? //"audio-play"和“voice3”分別是播放時候的動畫和播放（默認）結束的動畫
},false)
angular數據綁定下播放單個：
showPlayAudio:function(audioObj){
varaudio =document.createElement("audio");
audio.src=me.global.res+audioObj.src;;
audio.play();
audio.addEventListener("play",
function() {//監聽暫停
audioObj.audioStar=true;
that.$scope.$apply();
},false);
audio.addEventListener("ended",function() {
audioObj.audioStar=false;
$(".voice span").removeClass("audio-play");
that.$scope.$apply();
},false)
},
addEventListener脫離了ng的監管，屬于臨時工性質，故ng底層不會自動執行臟檢測更新視圖，需要手動$scope.$apply()強制執行臟檢測刷新視圖
控制css樣式綁定在傳過來的對象audioObj上，即audioStar
HTML部分：
<div ng-repeat = "d in audioList">
<p class="voice" ng-click="showPlayAudio(d)">
<span ng-class="{'voices':!d.audioStar,'audio-play':d.audioStar}"></span><i class="voice1"></i>
</p>
</div>
css部分：
.voice{width:100px;height:20px;margin-top:5px;line-height:20px;border:1px solid#E6E6E6;background-color:#f8f8f8;border-radius:10px;boxsizing: border-box;}
.audio-play{position: absolute;left:6px;animation:mymove1s infinite;-moz-animation:mymove1s infinite;/* Firefox */-webkit-animation:mymove1s infinite;/* Safari and Chrome */-o-animation:mymove1s infinite;/* Opera */}
@keyframesmymove{//注意兼容性
0%{top:7px;width:2px;height:3px;background:url("../images/voice_one.png")no-repeat;}
50%{top:4px;width:6px;height:9px;background:url("../images/voice_two.png")no-repeat;}
100%{top:2px;width:9px;height:13px;background:url("../images/voice_three.png")no-repeat;}
}
.voice3{position: absolute;left:6px;top:2px;width:9px;height:13px;background:url("../images/voice_three.png")no-repeat;}
如有問題歡迎指正
