我正在开发音频播放器。当页面加载时音频文件开始播放。一切都很好,但是当音频文件播放时,我想向音频播放/暂停按钮添加一个“播放”类,我有以下 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>
最佳答案
附加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>
关于jquery - HTML5音频文件播放或暂停时向div添加一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38664983/