javascript - 如何暂停/停止播放音频并替换为新的音频文件

标签 javascript html angularjs cordova audio

因此,当用户单击按钮时,将从音频文件数组中播放音频文件(大约 2 秒剪辑),效果很好。但是,如果用户重复单击该按钮,音频文件就会开始相互播放。理想情况下,我想停止/暂停以前的音频文件,然后播放新的音频文件。这是我尝试过的:

$scope.sounder=function(){


$scope.rs=$scope.diff[$scope.workout_index].audiorep;
$scope.ms=$scope.diff[$scope.workout_index].audiomove;

  //var movesound = new Audio ($scope.ms);
  //ar repsound = new Audio ($scope.rs);

  var movesound = new Media($rootScope.getMediaURL($scope.ms));
  var repsound = new Media($rootScope.getMediaURL($scope.rs));

  if($scope.muter==0){



      movesound.pause();//DOES NOT WORK
      movesound.stop();//STOPS ALL AUDIO FROM PLAYING, SO NOTHING PLAYS

      $timeout(function() {
        movesound.play();
      }, 1000);

      $timeout(function() {
        repsound.play();
      }, 3000);

  }

  if($scope.muter==1){
    console.log("Rachel has been muted");
    return;
  }
 }

最佳答案

除非您的应用程序中特别需要 AngularJS,否则您可以使用 Cordova 中的 JavaScript 来实现这些功能。

<audio controls  id="myAudio">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the HTML5 audio tag.
</audio> 

现在使用脚本添加功能 -

<script> 
var aud= document.getElementById("myAudio"); 

function playAud() { 
    aud.play(); 
} 

function pauseAud() { 
    aud.pause(); 
} 

function myFunction() { 
  isSupp = aud.canPlayType("audio/mp3");
  if (isSupp == "") {
    aud.src = "audio.ogg";
  } else {
    aud.src = "audio.mp3";
  }
  aud.load();
}
</script> 

查看this的其他答案关于使用 JavaScript 更改音频源的问题。

引用w3schools HTML Audio Video DOM reference Page了解更多属性和功能。

关于javascript - 如何暂停/停止播放音频并替换为新的音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44246612/

相关文章:

javascript - 与 Bootstrap 轮播中的中心图像对齐

html - 部分FA图标在FF、Chrome、Safari中显示,但没有浏览器全部显示

python - 使用 Python ElementTree 减少 html 标题

javascript - 在来自不同来源的 angularjs select 指令中设置所选项目

angularjs - 在 Phoenix/Elixir 中启用跨域资源共享 CORS

angularjs - 如何为按钮滑动添加CSS Transition

Javascript 获取函数上下文

javascript - 在我的地理编码器地理编码回调中,如何确定结果对应于哪个请求?

javascript - 添加使段落折叠到段落的最后可见行的链接

jQuery 和 CSS 悬停效果不起作用