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);
    }
  }

这也为用户设置了一个按钮，其中显示了静音或播放图标（也存储在localstorage中供下次使用）

在另一个页面上，我想给用户另一个选择，继续使用音乐或停止播放（在整个页面中继续播放）。

我使用相同类型的代码

  //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次，但两者之间会有一些延迟，而不是将其静音。

我尝试删除新的音频部分，但之后只是崩溃了，因为找不到音频文件。

理想的是它会停止或开始播放现有的音乐文件。（这是两个不同的控制器）

Answer 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音频无法正常工作角度|离子的

1 个答案: