当 HTML5 音频文件正在播放或暂停时向 div 添加一个类答案

【问题标题】：Add a class to div when HTML5 audio file is playing or pause当 HTML5 音频文件正在播放或暂停时向 div 添加一个类
【发布时间】：2016-07-29 18:05:10
【问题描述】：

我正在开发音频播放器。当页面加载音频文件开始播放。一切都很好，但是当音频文件播放时，我想向音频播放/暂停按钮添加一个“播放”类，我有以下 HTML 代码

<div class="player">
<audio id="audio" src="audio/testaudio.mp3" autoplay=""></audio>

<div class="btn__play pull-left" id="btnplay">
<i class="play-pause-button"></i>
</div>
</div>

【问题讨论】：

使用 javascript 事件监听器。
我对 JavaScript 不是很熟悉。请您告诉我如何添加课程？

标签： jquery html html5-audio

【解决方案1】：

附加playing和pause事件，并在那里进行操作。

var playBtn = document.getElementById('play');
var myAudio = document.getElementById("myAudio");
var isPlaying = false;
$(playBtn).click(function() {
  if (isPlaying) {
    myAudio.pause()
  } else {
    myAudio.play();
  }
});

myAudio.onplaying = function() {
  isPlaying = true;
  $(playBtn).removeClass('ion-play');
  $(playBtn).addClass('ion-pause');
};
myAudio.onpause = function() {
  isPlaying = false;
  $(playBtn).addClass('ion-play');
  $(playBtn).removeClass('ion-pause');
};

button {
  font-size: 22px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />

<body>
  <h3>Audio Test: <button id="play" class="ion-play"></button></h3>
  <div>
    <audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
    </audio>

  </div>
</body>

【讨论】：

你能像小提琴一样给吗？
它应该在音频开始播放时自动加载一个类
谢谢，我在等。
@user3263368 看看演示。我已经更新了工作的 sn-p。
谢谢。它帮助了我:)

【解决方案2】：

您可以像这样通过 javascript 轻松添加类：

var playbutton = document.getElementById("btnplay");
playbutton.className += " playing";

【讨论】：

也许对于这种情况，最好使用classList，因为它们具有添加、删除和切换方法，并且更容易定位特定类，从而使 OP 更容易在播放和暂停之间切换状态？
toggle 可以工作，但它应该在音频开始播放时自动加载一个类。
@user3263368 啊我错过了这一点，很抱歉让我们度过了漫长的一天