html5 音频无法与 angular 正常工作 |离子的

Question

问题：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 个不同的控制器）

Answer 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 正常工作 |离子的

html5 audio not working properly with angular | ionic

html

javascript

audio

html5-audio

angularjs