Question

我的控制器中有一个数据数组，包括一个声音文件源的字符串。我需要做的是读取数组并以ng-repeat显示它。我有一个按钮，必须播放阵列中每个元素的声音。

源是一个字符串，但是当我将它传递给ngAudio时，它会搜索类似＆gt;的源。 http://localhost:8100/%7B%7Banimal.audio%7D%7D，因此它永远不会找到要播放的文件

我曾想过有另一个控制器，一旦通过ng-repeat调用，就会收到源的值，但这对我来说并不好看。有没有办法实现这个目标？

这是我的代码：

//controller

.controller('GranjaController', function($scope) {
  $scope.animals = [
    { name: 'Vaca', id: 1, img: "img/granja/vaca.png", kname: "Wakax", audio: "sounds/vaca.mp3" },
    { name: 'Caballo', id: 2, img: "img/granja/caballo.png", kname: "Kej" , audio: "sounds/caballo.mp3" }
  ];
})



//index.html

<ion-item ng-repeat="animal in animals" href="#/app/playlists/{{playlist.id}}">
    <img ng-src="{{animal.img}}" />
    {{animal.name}}
    <button ng-audio= "{{animal.audio}}" volume="0.5" start="0.2">Click me</button>
    <button ng-audio= "sounds/granja/vaca.mp3" volume="0.5" start="0.2">Click me</button>
</ion-item>

第一个按钮永远不会到达文件，因为ngAudio收到一个奇怪的字符串，第二个按钮工作正常，尽管我在数组中有相同的字符串。正如ngAudio的文档所说：＆＃34; ngAudio：使用ngAudio.load（）＆＃34;取一个字符串并创建一个新对象。那它为什么不起作用？

更新

我使用控制器内部的load（）方法使其工作，正如@jami0821指出的那样。这是我的最终代码：

//controller

.controller('GranjaController', function($scope, ngAudio) {
  $scope.animals = [
    { name: 'Vaca', id: 1, img: "img/granja/vaca.png", kname: "Wakax", audio: ngAudio.load("sounds/granja/vaca.mp3") },
    { name: 'Caballo', id: 2, img: "img/granja/caballo.png", kname: "Kej" , audio: ngAudio.load("sounds/granja/caballo.mp3") }
  ];
})


//index.html
<ion-item ng-repeat="animal in animals" href="#/app/playlists/{{playlist.id}}">
    <img ng-src="{{animal.img}}" />
    {{animal.name}}
    <button ng-click="animal.audio.play()">Click me</button>
</ion-item>

Answer 1

音频是通过ngAudio服务的load方法加载的：

angular.module('yourModule',['ngAudio'])
.controller("yourController",function($scope,ngAudio){
    $scope.sound = ngAudio.load("sounds/mySound.mp3"); // returns NgAudioObject
})

所以可能想尝试修改控制器以包含ngAudio依赖项以及load方法。

来源：https://danielstern.github.io/ngAudio/#/docs

无法将音频源传递到ng-repeat内的ngAudio

1 个答案: