Question

我有一个HTML代码：

<audio src="whale-music.mp3" id="audio"></audio>
<button class="oi oi-media-play b-play" id="play" onclick="play()"></button>

和脚本：

<script>
function play() {
    var audio = document.getElementById('audio');
    if (audio.paused) {
        audio.play();
        document.getElementById('play').removeClass('oi-media-play')
        document.getElementById('play').addClass('oi-media-pause')
    }else{
        audio.pause();
        audio.currentTime = 0
        document.getElementById('play').addClass('oi-media-play')
        document.getElementById('play').removeClass('oi-media-pause')
    }
}

它会播放和暂停歌曲，但不会更改类别，也不会在停止时返回播放（从头开始播放）。此代码有什么问题？

Answer 1

我们使用此代码

function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
    audio.play();
    document.getElementById('play').classList.remove('oi-media-play')
    document.getElementById('play').classList.add('oi-media-pause')
}else{
    audio.pause();
    audio.currentTime = 0
    document.getElementById('play').classList.add('oi-media-play')
    document.getElementById('play').classList.remove('oi-media-pause')
}}

“ removeClass”和“ addClass”是一种jQuery语法

Answer 2

如果您使用本机代码：

 document.getElementById('play').classList.remove('oi-media-play');
 document.getElementById('play').classList.add('oi-media-pause');

或Jquery：

$('#play').removeClass('oi-media-play');

音频播放器仅一部分可用

2 个答案: