Question

我正在尝试使用ng-repeat加载图片，将其移动到适当的位置，同时播放相关的音色。然后继续对下一个图像（一次一个）执行相同的操作。我遇到的问题是，当我尝试调用我的播放功能时，它会同时调用它们。因此我收到了错误

未捕获（在promise中）DOMException：play（）请求被中断通过新的加载请求。

我getAudioSrc()使用ng-src的原因是因为如果我没有收到错误

插值时出错： ../内容/游戏/音频/ {{it.Tone.ToneFileName}}

我能找到的大部分内容都是关于在ng-click事件上调用函数。由于没有点击事件，我使用了ng-init

<div class="circle-container">
    <div ng-repeat="it in model.imageTones | orderBy:Position">
        <img ng-src="../Content/Game/Animals/{{it.Image.ImageFileName}}" ng-style="{'transform': 'rotate(' + (it.Position*30) + 'deg) translate(19em) rotate(-' + (it.Position*30) + 'deg)'}" />
        <audio id="audioPlayed" ng-src="{{model.getAudioSrc(it.Tone.ToneFileName)}}" ng-init="model.play()"></audio>
    </div>
</div>




module.component("gameLts",
{
    templateUrl: "../GameAngular/game-lts.html",
    bindings: {
        imageTones: "<"
    },
    controllerAs: "model",
    controller: function() {
        var model = this;

        model.getAudioSrc = function(toneFileName) {
            return '../Content/Game/Audio/' + toneFileName;
        };

        model.play = function () {
            $("#audioPlayed")[0].play();
        };
}

在ng-repeat中调用函数

0 个答案: