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

Thank you for your answers. The problem has been solved. I used a stupid method. I found the filter method of $sce, and then loaded the click event to the image to get the ID of the <audio> tag, and then used it dynamically. ng-bind-html binds the code of the <audio> tag.

 <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

I think you can directly use the API of html5audio and use js in the controller to directly control the playback of audio. Here are some simple methods of control.

Answer 3

is a bug in angular. This issue has been closed on github, you can refer to the solution