html5 - angularJS如何实现点击播放「图标」播放相应的音频文件
天蓬老师
天蓬老师 2017-04-17 11:52:23
0
3
1033

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

我的思路是这样的:首先让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()" />
         
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(3)
黄舟

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>";
                   };
黄舟

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.

大家讲道理

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template