只有部分音频播放器工作

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')
    }
}

它播放和暂停了歌曲，但它没有改变类，也没有 returns 到停止播放的位置（从头开始播放）。这段代码有什么问题？

Answer 1

如果您使用本机代码：

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

或Jquery:

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

Answer 2

我们使用这个代码

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 语法

只有部分音频播放器工作

Only part of the audio player works

javascript

css

audio

audio-player