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

以下是我目前掌握的情况：

HTML:

，因为如果添加到“ctrl”元素的唯一HTML是文本（即“Play！”和“Pause！”而不是图像），那么同样的代码也可以正常工作

---

有什么建议吗？感谢您的帮助。

您最好使用布尔值，而不是检查html，因为浏览器可以更改html。您可以将其改为背景图像，只添加/删除具有不同背景图像属性的类吗？我将“ctrl.onclick”更改为：ctrl.onclick=函数（）{//更新按钮ctrl.innerHTML=pause？playHTML:pauseHTML；//更新音频变量方法=pause？'pause'：'play'；yourAudio[method]（）；pause=！pause；//防止默认操作返回false；}，这解决了问题。谢谢epascarello！很抱歉，^^^^^^^看起来很糟糕，但我在8个小时内都不允许回答这个问题！问题已经解决了。为什么混合使用jQuery及其DOM等价物？保持一致并在任何地方使用jQuery）

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

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;