html5 - angularJS如何实现点击播放「图标」播放相应的音频文件

Question

像下面这种的，点击汉字下面出现不同的信息，然后点击拼音信息后面的“小喇叭”图标，实现播放声音。

我的思路是这样的：首先让audio标签的display：none，隐藏掉音频的样式，然后用小喇叭图片代替，给小喇叭图片设置点击事件，加载相应的汉字拼音src属性，然后给autoplay双向绑定赋值为autoplay也就是自动播放，但是audio标签的src属性好像不能用angularJS的双向绑定赋值，然后又试了不同的办法，依然无解，麻烦了解的朋友给我点思路或者解决方法，谢谢。

 1、拼音：{{HSKzi.PY1}}
         <audio autoplay="{{mp31}}">
              <source ng-src="{{HSKMp3Path1}}" type="audio/mpeg" />
         </audio>
         <img ng-style="{display:HSKzi.PY1?'inline':'none'}" id="mp3Img" src="../../images/msg.gif" ng-click="mp3Play1()" />
         

Answer 1

谢谢大家的答案，问题已经解决了，用的算是一个笨办法，找到了$sce的过滤器方法，然后通过给图片加载点击事件，获得<audio>标签的ID，然后动态的使用ng-bind-html绑定了<audio>标签的代码。

 <i ng-bind-html="Mp3Path1 | to_trusted"></i>
 <img id="mp3Img" src="../../images/msg.gif" ng-click="mp3Play('HSK','1')" />
 
$scope.MP3click = function (HSK) {
            $scope.HSKMp3Path1 = "<audio  controls='controls' id='Audio1'><source src='../../data/media/"+PY1+".mp3' type='audio/mpeg' /></audio>";
                   };

Answer 2

我觉得你可以直接使用html5audio的API，在控制器中使用js直接控制audio的播放，这里有一些控制的简单方法。

Answer 3

是angular的一个bug。这个议题在github上已经关闭了，可以参考下解决方案