非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;}
如有问题欢迎指正
