如何在播放和暂停按钮之间切换？

Essentially, I would like to know the best way to toggle between two img or div on a user click. So, first the play image is visible and when user clicks, play image is hidden and pause image is shown. When user clicks pause image, pause image is hidden and play image is shown.

基本上，我想知道在用户点击时在两个img或div之间切换的最佳方法。因此，首先播放图像是可见的，当用户点击时，隐藏播放图像并显示暂停图像。当用户点击暂停图像时，隐藏暂停图像并显示播放图像。

I tried using an ng-show but I could only figure out how to show both images without hiding the other. So, a play image would be next to the pause image, which is not ideal.

我尝试使用ng-show但我只能弄清楚如何显示两个图像而不隐藏另一个。因此，播放图像将在暂停图像旁边，这是不理想的。

Thanks in advance :)

提前致谢：）

Code I have tried that does not work:

我试过的代码不起作用：

HTML

<button ng-click="changeStatus" ng-show="checkStatus">Play</button>
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>

Controller:

控制器：

$scope.changeStatus=function(){
    $scope.checkStatus = false;
}

$scope.changeStatusAgain=function(){
    $scope.checkStatus = true;
}

https://jsfiddle.net/n8nnwtte/

2 个解决方案

#1

Use the same expression for both and negate it according to your logic.

对两者使用相同的表达式，并根据您的逻辑否定它。

HTML

HTML

 <button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
 <button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

var $scope.song = {
    playing: false, // Set the initial state

    togglePlay: function() {
         $scope.song.playing = !$scope.song.playing; // This would alternate the state each time

         // Do something with the song
        if ($scope.song.playing) { /*..*/ }  else { /*..*/ }
    }
};

This assumes you have a song object defined in your scope and that it has a boolean property called playing. So if song.playing is falsy we show the play button and if it's truthy we show the pause button.

这假设您在作用域中定义了一个歌曲对象，并且它具有一个名为playing的布尔属性。因此，如果song.playing是假的，我们会显示播放按钮，如果它是真的，我们会显示暂停按钮。

The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.

然后定义的togglePlay（）方法可用于交替歌曲状态。播放以及实际控制播放的角色。

#2

JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element

在DOM元素的Click事件上进行JavaScript切换（播放/暂停）声音

his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.

他的文章展示了如何通过JavaScript操作DOM元素的onclick事件来切换（播放/暂停）声音。在此示例中，HTML5音频标记的浏览器支持是必须的。

https://siongui.github.io/code/javascript-sound/toggle.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>

<button id="player" type="button"
  onclick="javascript:toggleSound();">
  Click to Toggle Sound
</button>
<audio id="audio">
  <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script type="text/javascript">
function toggleSound() {
  var audioElem = document.getElementById('audio');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause();
}
</script>

</body>
</html>

#1

Use the same expression for both and negate it according to your logic.

对两者使用相同的表达式，并根据您的逻辑否定它。

HTML

HTML

 <button class="play" ng-show="!song.playing" ng-click="song.togglePlay()">
 <button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

var $scope.song = {
    playing: false, // Set the initial state

    togglePlay: function() {
         $scope.song.playing = !$scope.song.playing; // This would alternate the state each time

         // Do something with the song
        if ($scope.song.playing) { /*..*/ }  else { /*..*/ }
    }
};

The togglePlay() method defined can then be used to alternate the state of song.playing in addition to its role of actually controlling the playback.

然后定义的togglePlay（）方法可用于交替歌曲状态。播放以及实际控制播放的角色。

#2

JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element

在DOM元素的Click事件上进行JavaScript切换（播放/暂停）声音

his post shows how to toggle (play/pause) sound by JavaScript manipulation of onclick event of a DOM element. Browser support of HTML5 audio tag is a must in this example.

他的文章展示了如何通过JavaScript操作DOM元素的onclick事件来切换（播放/暂停）声音。在此示例中，HTML5音频标记的浏览器支持是必须的。

https://siongui.github.io/code/javascript-sound/toggle.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title>
</head>
<body>

<button id="player" type="button"
  onclick="javascript:toggleSound();">
  Click to Toggle Sound
</button>
<audio id="audio">
  <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>

<script type="text/javascript">
function toggleSound() {
  var audioElem = document.getElementById('audio');
  if (audioElem.paused)
    audioElem.play();
  else
    audioElem.pause();
}
</script>

</body>
</html>

秒客网

如何在播放和暂停按钮之间切换？

2 个解决方案

#1

#2

#1

#2

相关文章