问题:AngularJS 同时播放同一首歌曲两次，中间有几秒钟的延迟， 第一次我调用音乐时，我是这样做的:
//preset sound
var sound = true;
var sound = localStorage.sound;
var sound = eval(sound);
$scope.icon = "ion-volume-mute";
var audio = new Audio('sound/song.mp3');
audio.loop = true;
//change icon & sound based on localstorage variables
if (sound == true){
window.localStorage.setItem("sound", true);
audio.play();
$scope.icon = "ion-volume-mute";
console.log(sound);
}
else{
window.localStorage.setItem("sound", false);
console.log("ëlse " + sound);
audio.pause();
$scope.icon = "ion-volume-high";
}
//let the user toggle the sound ( MUTE | Play)
$scope.soundControl = function() {
if (sound == false){
sound = true;
audio.play();
$scope.icon = "ion-volume-mute";
window.localStorage.setItem("sound", true);
console.log(localStorage.sound);
}
else{
sound = false;
audio.pause();
$scope.icon = "ion-volume-high";
window.localStorage.setItem("sound", false);
console.log(localStorage.sound);
}
}
这还为用户设置了一个按钮，其中显示静音或播放图标(也存储在本地存储中以供下次使用)
在另一个页面上，我想给用户另一个选择来继续使用音乐或停止它(在整个页面中继续播放)。
我使用相同类型的代码
//sound
var sound = true;
var sound = localStorage.sound;
var sound = eval(sound);
$scope.icon = "ion-volume-mute";
var audio = new Audio('sound/song.mp3');
audio.loop = true;
//audio switch ( PLAY | PAUZE)
$scope.soundControl = function() {
if (sound == false){
sound = true;
audio.play();
$scope.icon = "ion-volume-mute";
window.localStorage.setItem("sound", true);
console.log(localStorage.sound);
}
else{
sound = false;
audio.pause();
$scope.icon = "ion-volume-high";
window.localStorage.setItem("sound", false);
console.log(localStorage.sound);
}
}
奇怪的是，现在当您切换按钮时，音乐会开始播放两次，中间有一些延迟，而不是静音。
我尝试删除新的音频部分，但随后页面崩溃，因为找不到音频文件。
理想情况下，它会停止或开始播放现有的音乐文件。 (这是跨 2 个不同的 Controller )
最佳答案
通过使用我视野周围的 Controller ，我可以将我的东西放入 1 个 Controller 中，这看起来就像一个魅力
<body ng-app="starter">
<div ng-controller="complete-app">
<ion-nav-view></ion-nav-view>
</div>
</body>
使用这样的 Controller
app.controller("complete-app", function($scope) {
$scope.icon = "ion-volume-mute";
var audio = new Audio('sound/song.mp3');
audio.loop = true;
if (localStorage.sound === null)
{
var sound = true;
}
else {
var sound = localStorage.sound;
var sound = eval(sound);
}
//change icon & sound based on localstorage variables
if (sound === true){
window.localStorage.setItem("sound", true);
console.log("sound " + sound);
audio.play();
$scope.icon = "ion-volume-mute";
console.log(sound);
}
else{
window.localStorage.setItem("sound", false);
console.log("sound " + sound);
audio.pause();
$scope.icon = "ion-volume-high";
}
//let the user toggle the sound ( MUTE | Play)
$scope.soundControl = function() {
if (sound === false){
sound = true;
audio.play();
$scope.icon = "ion-volume-mute";
window.localStorage.setItem("sound", true);
console.log(localStorage.sound);
}
else{
sound = false;
audio.pause();
$scope.icon = "ion-volume-high";
window.localStorage.setItem("sound", false);
console.log(localStorage.sound);
}
}
});
关于javascript - html5 音频无法与 Angular 一起正常工作 ionic 型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38852859/