html5 音频无法与 Angular 一起正常工作 |离子的
Posted
技术标签:
【中文标题】html5 音频无法与 Angular 一起正常工作 |离子的【英文标题】：html5 audio not working properly with angular | ionic 【发布时间】：2016-08-09 13:58:28 【问题描述】：问题：angularjs 同时播放同一首歌曲 2 次，它们之间有几秒钟的延迟， 第一次调用音乐时，我会这样做：
//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 次，中间有一些延迟，而不是静音。
我尝试删除新的音频部分，但由于找不到音频文件而导致页面崩溃。
理想情况下，它会停止或开始播放现有的音乐文件。 （这是跨 2 个不同的控制器）
【问题讨论】：
当你这样做时：var sound = true; var sound = localStorage.sound; var sound = eval(sound); 你不只是重新分配一个变量的值吗？所以在一个例子中它是true，但突然之间它被存储为声音，但不是真的，然后最终被评估，但它不再被存储为声音，也不是真的。
我试着做一个这样的 if/else if (localStorage.sound === null) var sound = true; else var sound = localStorage.sound; var声音=评估（声音）；但仍然在另一页中开始一首新歌，而不是使用第一个控制器中的歌曲（也删除了声音 = true；部分来自第二个控制器的 c）
第一个在整个页面中一直播放，但第二个似乎无法识别它是同一个
你修好了？太好了，你应该回答你自己的问题。我注意到ion 浮动，如果你正在使用它，你应该添加标签ionic-framework。
真棒我会的，是的，但我认为它与框架无关。谢谢你的帮助:)
【参考方案1】：
通过使用视图周围的控制器，我可以将我的东西放在 1 个控制器中，这看起来就像一个魅力
<body ng-app="starter">
<div ng-controller="complete-app">
<ion-nav-view></ion-nav-view>
</div>
</body>
还有这样的控制器
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);
);
【讨论】：
以上是关于html5 音频无法与 Angular 一起正常工作 |离子的的主要内容，如果未能解决你的问题，请参考以下文章