简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - angularJS如何实现点击播放「图标」播放相应的音频文件
天蓬老师
天蓬老师 2017-04-17 11:52:23
0
3
935

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

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

1、拼音：{{HSKzi.PY1}}
天蓬老师
天蓬老师

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

reply all (3)
黄舟
黄舟2017-04-17 11:54:23 3 floor

谢谢大家的答案，问题已经解决了，用的算是一个笨办法，找到了$sce的过滤器方法，然后通过给图片加载点击事件，获得

  $scope.MP3click = function (HSK) { $scope.HSKMp3Path1 = ""; };
Like+0
Add Reply
    黄舟
    黄舟2017-04-17 11:54:23 2 floor

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

    Like+0
    Add Reply
      大家讲道理
      大家讲道理2017-04-17 11:54:23 1 floor

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

      Like+0
      Add Reply
        Popular Topics
        More>
        Popular Articles
        Popular Tutorials
        More>
        Related Tutorials
        Popular Recommendations
        Latest courses
        Latest Downloads
        More>
        Web Effects
        Website Source Code
        Website Materials
        Front End Template
        About us Disclaimer Sitemap
        php.cn：Public welfare online PHP training，Help PHP learners grow quickly！