JS停止当前播放的Audio对象加载新的答案

【问题标题】：JS stop current Audio object of playing load new oneJS停止当前播放的Audio对象加载新的
【发布时间】：2017-05-19 21:19:29
【问题描述】：

我正在使用 Ionic 和 AngularJS 创建一个 Podcast 应用程序

我有两种看法：

列表视图（显示所有播客）
详细视图（选定的播客）

每次用户打开详细视图时，我都会从数据库中获取新的播客 URL，并将其加载到新的音频对象中。

sound = new Audio($scope.mp3);

如果我播放播客，然后返回列表视图并选择另一个播客并播放，当前播放的播客不会停止，然后我同时播放两个（或多个）。

angular.module('starter.controllers', ['firebase'])


.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

   // Initialize Firebase


  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };

})

// Browse Controller
.controller('BrowseCtrl', function($scope, $http, $firebaseArray) {
  // Create Podcast reference 
  const dbRefObject = firebase.database().ref().child('podcasts');
  $scope.playlists = $firebaseArray(dbRefObject);
  console.log($firebaseArray(dbRefObject));
})




// Podcast Detailed Controller
.controller('PodcastCtrlDetailed', function($scope, $http, $stateParams, $firebaseArray) {

  // URL Parameter
  var podcastRefID = $stateParams.playlistId;

  const oneRef = firebase.database().ref().child('podcasts').child(podcastRefID).on("value", function(snapshot) {

    $scope.mp3 = snapshot.val().audio;
    sound = new Audio($scope.mp3);

    $scope.playSong = function() {
      
      if (sound.duration > 0 && !sound.paused) {
        sound.pause();
      } else {
          sound.play();
      }

    }; 


  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  });


});

这就是我初始化播放和暂停的方式

<i class="ion-play" ng-click="playSong()" ></i>

有什么方法可以让当前播放的播客停止并开始新选择的播客？

提前致谢！

【问题讨论】：

你能把剩下的代码贴出来吗？我的猜测是，解决方法是让专用音频元素在您的其他视图的上下文之外存在。 one audio 元素负责播放 mp3，只需更新该元素的 src 即可确保只播放一种声音。
我现在已经添加了完整的代码。我认为 new Audio 会不断创建新对象，而不是像变量一样替换它们。嗯……
你试过了吗 var sound = new Audio($scope.mp3); ?
那是原始代码。我不知道为什么我把它取下来了，但是问题仍然存在
使用服务来播放歌曲。您将拥有一个声音变量的单一实例。我假设，在您的代码中，每次单击另一个播客时，您都不会重新加载当前的 PodcastCtrlDetailed 控制器，而是创建一个新控制器。

标签： javascript angularjs

【解决方案1】：

似乎为每个播客引用创建了一个新的New Audio($scope.mp3) (....child('podcasts').child(podcastRefID)...)。

尝试通过在更高范围内声明单个共享音频引用，以及var podcastRefID = $stateParams.playlistId

这个单一实例是您想要暂停的方式，并在所选播客更改时更新src

【讨论】：