使用JavaScript为音频创建自定义播放/暂停按钮

Question

这是我到目前为止所拥有的：

HTML：

<audio id="broadcast" preload='auto'>
    <source src='broadcastThoughts.mp3' type='audio/mp3' />
</audio>
<a href="#" id="control"><img src='play.png' style='height:10vh; width:auto;'></a>

JavaScript的：

if ($.cookie("sound") == "off") {
    $("#broadcast").get(0).volume = 0;
}
else {
    $("#broadcast").get(0).volume = .05;
}

var yourAudio = document.getElementById('broadcast'),
    ctrl = document.getElementById('control'),
    playHTML = "<img src='play.png' style='height:10vh; width:auto;'>",
    pauseHTML = "<img src='pause.png' style='height:10vh; width:auto;'>";


ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === pauseHTML;
    ctrl.innerHTML = pause ? playHTML : pauseHTML;

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

烨。看起来很简单，但有些原因此代码只播放音频并将图像更改为“暂停”按钮。之后，单击暂停按钮不会将其更改回播放或暂停音频。我认为问题可能与此有关，

// Update the Button
var pause = ctrl.innerHTML === pauseHTML;
ctrl.innerHTML = pause ? playHTML : pauseHTML;

，因为如果你添加到“ctrl”元素的唯一HTML是文本（即“Play！”和“Pause！”而不是图像），这个相同的代码工作正常。

任何提示？谢谢你的帮助。