angular不会更改json的音频源
angular does not change audio source from json
我正在尝试将音频文件嵌入到带有音频标记的HTML中。播放音频的src是从API获得的,我有5-6个不同的音频文件。
当我点击playStart()时,播放的音频文件是相同的,即使src显示不同的链接
<tbody>
<tr ng-repeat="val in values track by $index">
<td ng-bind="$index +1">1</td>
<td ng-bind="val._id">ED1500322</td>
<td>
<audio id="audioTag">
<source controls ng-src="{{val.file}}"></source>
</audio>
<button class="play-btn" ng-click="playStart()"><img src="app_static/images/play.png"></button>
<button class="play-btn" ng-click="playStop()">stop</button>
</td>
<td ng-bind="val.result"></td>
</tr>
</tbody>
Js文件
$scope.playStart = function() {
var audio = document.getElementById("audioTag");
audio.load();
audio.play();
};
$scope.playStop = function() {
var audio = document.getElementById("audioTag");
audio.pause();
audio.currentTime = 0;
};
我只听到相同的音频片段,即使DOM显示链接是不同的
感谢您提供从api 获得的任何音乐播放帮助
使用类:
HTML
<tbody>
<tr ng-repeat="val in values track by $index">
<td ng-bind="$index +1">1</td>
<td ng-bind="val._id">ED1500322</td>
<td>
<audio class="audioTag">
<source controls ng-src="{{val.file}}"></source>
</audio>
<button class="play-btn" ng-click="playStart($index)"><img src="app_static/images/play.png"></button>
<button class="play-btn" ng-click="playStop($index)">stop</button>
</td>
<td ng-bind="val.result"></td>
</tr>
JS
$scope.playStart = function(index_) {
var audio = document.getElementsByClassName("audioTag")[index_];
audio.load();
audio.play();
};
$scope.playStop = function() {
var audio = document.getElementsByClassName("audioTag")[index_];
audio.pause();
audio.currentTime = 0;
};
您的问题是
document.getElementById("audioTag")
始终返回页面中的第一个元素。
你可以做的是更改id,这样每个音频元素都会有不同的id。
更改
<audio id="audioTag">
至
<audio id="audioTag{{$index}}">
因此元素将具有标签"audioTag1"、"audioTag2"。
之后,将调用更改为playStart
,将playStop
函数更改为:
playStart('audioTag{{$index}}')
因此,您将获得id作为参数。
你的功能变成:
$scope.playStart = function(id) {
var audio = document.getElementById(id);
audio.load();
audio.play();
};
仅此而已。
相关文章:
- 如何播放部分音频文件
- jQuery匹配JSON对象的部分文本
- 在循环中分配json值时,值被覆盖
- 需要帮助设置json数组
- 如何在Javascript中将JSon对象转换为数组
- 我可以在json对象中添加一个函数吗
- 使用JS将数组转换为json对象
- Javascript-如何读取json文件中的列并将其保存在Javascript数组中
- 音频控件在mouseover上显示,在mouseout上淡出
- 使用JQuery解析JSON嵌套数组
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 如何使用json将对象列表从java转换为javascript
- 如何使用 node.js 比较两个 json 数组
- 如何将JSON数据导入我的ejs模板
- angular不会更改json的音频源
- 如何使用 JSON 下载音频文件
- 使用javascript和jquery将“下一个”和“上一个”按钮添加到来自JSON的HTML5音频播放器
- REST Api在节点中发送音频文件和json数据
- 使用Fetch访问JSON数据,输出为音频