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的過濾器方法，然後通過給圖片加載點擊事件，獲得

 <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上已經關閉了，可以參考下解決方案