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

【问题标题】：HMTL audio with Angular JS and Material grid list not updating audio elements when visual elements update带有 Angular JS 和 Material 网格列表的 HTML 音频在视觉元素更新时不会更新音频元素
【发布时间】：2020-07-23 23:58:11
【问题描述】：

我在 AngularJS Material 中制作了一个网格列表。网格列表是使用 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，音频文件甚至不播放，即使控制台显示它正在获取音频文件。

【问题讨论】：

标签： javascript html audio angular-material angularjs-ng-repeat

【解决方案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 文件中，然后将示例的其余部分放在 Home 视图中：

现场演示链接：

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

和平我的perros :)

【讨论】：