jquery - HTML5音频文件播放或暂停时向div添加一个类

标签 jquery html html5-audio

我正在开发音频播放器。当页面加载时音频文件开始播放。一切都很好,但是当音频文件播放时,我想向音频播放/暂停按钮添加一个“播放”类,我有以下 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>

最佳答案

附加playingpause事件,并在那里进行操作。

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>

关于jquery - HTML5音频文件播放或暂停时向div添加一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38664983/

相关文章:

javascript - 从外部输入动态更改脚本

javascript - 在 Javascript 中从字符串生成函数

html - 使用 div 使表格拉伸(stretch)

javascript - 通过电子邮件发送表单 使用 javascript 通过提交字段发送表单

javascript - html <a> 激活点击输入按下

javascript - 如何清除/释放音频接触 html5

firefox - html5 中的音频在 FF4/Safari 中不起作用

javascript - JQuery UI 工具提示 - 调用 ajax 后不透明度被破坏。

javascript - 如何为音频播放器创建可视化工具

javascript - 超链接在手机上不可点击,在桌面上工作正常