具有 Angular JS 和 Material 网格列表的 HTML 音频在视觉元素更新时不更新音频元素

Question

我在AngularJSMaterial中做了一个网格列表。网格列表是使用 ng-repeat 从 JSON 文件生成的。每个图块都有独特的视觉元素，当您单击图块时，它会播放一个独特的音频文件。有四种语言（英语、西班牙语、中文、芬兰语）。更改语言会从每种语言独有的 JSON 对象重新绘制新的网格列表。视觉上一切都完美无缺。错误是当语言改变时音频元素不会改变。当您切换到西班牙语、中文或芬兰语时，您将获得英语音频文件。

这是我的网格列表：

<md-grid-list md-cols="6" md-row-height="40px">
    <md-grid-tile ng-repeat="consonant in targetLanguageConsonants track by $index">

      <md-button ng-show="consonant.audioButton" ng-class="[consonant.color, consonant.classAudio]" ng-click="playAudio(consonant.phoneme)" aria-label="Play audio">
        <md-icon md-svg-src="media/icons/headphones.svg" aria-label="Listen to phoneme"></md-icon>
        <audio id="{{consonant.phoneme}}">
          <source ng-src="{{consonant.audioSource}}" type="{{consonant.audioType}}"></source>
        </audio>
      </md-button>

    </md-grid-tile>
  </md-grid-list>

这是我在控制器中的音频处理程序：

  $scope.playAudio = function(phoneme) {
    $scope.targetLanguageConsonants.forEach((consonant) => {
      if (consonant.phoneme === phoneme) {
        document.getElementById(consonant.phoneme).play();;
      }
    });
  };

记录控制器处理程序，检索到正确的音频源文件。检查图块，每个图块的 id 都是正确的。一切似乎都在工作，但当语言改变时，音频永远不会改变。我试过 $scope.$apply() 但出现 already in progress 错误。

一个可能的问题是我不清楚何时在 ng-repeat 中使用 {{}} 双大括号。我的规则是在 ng- 任何内容中，不使用 {{}}。但是 ng-src="{{consonant.audioSource}}" 需要 {{}}.

这是使用 Chrome 和 FireFox。切换到 Safari，即使控制台显示正在获取音频文件，音频文件也无法播放。

Answer 1

解决这个问题的最佳选择是像这样制定和指令：

app.directive('audiotrack', function($sce) {
  return {
    restrict: 'A',
    scope: { url:'=' ,id : '@',  },
    replace: true,
    template: '<audio id="{{id}}" ng-src="{{newUrl}}" controls></audio>',
    link: function (scope) {
        scope.$watch('url', function (newVal, oldVal) {
           if (newVal !== undefined) {
               scope.newUrl = $sce.trustAsResourceUrl(newVal);
           }
        });
    }
  };
});

并且在 ng-repeat 部分的组件视图中只需添加您的指令：

playing Audio Nº {{indexAudio}}
<ul>
    <li ng-repeat="audio in myAudios track by $index">
      <button ng-click="playAudio(audio,$index)" aria-label="Play audio">Play {{$index}}</button>
    </li>
</ul>
<div audiotrack url="selectedAudioUrl" id="myAudioPlayer"></div>

我做了一个工作示例，指令在 app.js 文件中定义，然后示例的其余部分在主页视图中：

现场演示 link:

https://stackblitz.com/edit/angularjs-7bmth3

和平我的 perros :)

具有 Angular JS 和 Material 网格列表的 HTML 音频在视觉元素更新时不更新音频元素

HMTL audio with Angular JS and Material grid list not updating audio elements when visual elements update

html

javascript

audio

angularjs-ng-repeat

angular-material