angular-语音文件播放

非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;}

如有问题欢迎指正