Javascript Can'；t使用音频标记中的标记进行插值

我正在尝试创建一个音频播放器，它将以正确的数据源显示在多个项目上。数据源通过存储在Firebase中的令牌拉入。在Firebase中，存储的路径取自Amazon S3存储桶

有没有更好的方法来创建具有不同来源的多个音频元素？我也尝试过使用ngsrc和数据ngsrc。两者都做与常规src相同的事情

这是我的密码

<div class="musicPreview">
  <div class="musicPreviewCard" ng-repeat="march in marchPrev">
     <a href=""><div class="previewImage" style="background-image: url('{{march.image}}')"></div></a>
     <table>
        <tr>
          <td colspan="4" style="text-align: center;"><h1 style="{{march.font}}">{{march.name}}</h1></td>
        </tr>
        <tr>
          <td colspan="4">

                  <div class="musicPlayer">
                    <audio controls data-ng-src='{{march.sample}}' type="audio/mp3">
                    </audio>
                  </div>
          </td>
        </tr>
        <tr>
          <td><h3><span class="bold">Winds Difficulty:</span> {{march.windDif}}</h3></td>
          <td><h3><span class="bold">Percussion Difficulty:</span> {{march.percussionDif}}</h3></td>
          <td><h3><span class="bold">Duration:</span> {{march.duration}}</h3></td>
          <td><h3><span class="bold">Price:</span> ${{march.price}} with percussion</h3></td>
        </tr>

       </table> 
  </div>
</div>

---

我在您编写的代码中没有看到“marchPrev”$scope属性posted@o4ohel把它加进去忘了把它和OP一起放进去。

    var marchPreview = new Firebase(FIREBASE_URL + '/marchingBandPreview');
    var marchPreviewInfo = $firebaseArray(marchPreview);
    $scope.marchPrev = marchPreviewInfo;

    $scope.addMarchingPreview = function() {
      marchPreviewInfo.$add({
        name: $scope.name,
        windDif: $scope.windDif,
        percussionDif: $scope.percussionDif,
        duration: $scope.duration,
        price: $scope.price,
        image: $scope.image,
        sample: $scope.sample,
        font: $scope.font
      }).then(function() {
        $scope.name='';
        $scope.windDif='';
        $scope.percussionDif='';
        $scope.duration='';
        $scope.price='';
        $scope.image='';
        $scope.sample='';
        $scope.font='';
      });
    };