html5 音频无法与 Angular 一起正常工作 |离子的答案

【问题标题】：html5 audio not working properly with angular | ionichtml5 音频无法与 Angular 一起正常工作 |离子的
【发布时间】：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。
真棒我会的，是的，但我认为它与框架无关。谢谢你的帮助:)

标签： javascript angularjs html audio html5-audio

【解决方案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);
    }
  }
});

【讨论】：