html - 是否可以在单击事件上使音频元素的控件出现/消失？

Question

我在运行时设置音频对象的 src 如下

<a style="padding-top:0" href="#" onclick="audioClick('audio1', 'http://theurl.mp3');">
<p><audio id="audio1" controls></audio></p>

function audioClick(id, clip) {
    var audio = document.getElementById(id);
    if (audio.paused) {
        audio.src = clip;
        audio.play();
    }
    else {
        audio.pause();
        audio.currentTime = 0;
    }
}

但是，当页面加载时，控制栏显示“无法播放音频”。当显示 audioClick() 函数时，这会消失，但是我不希望它首先出现在那里。

因此有没有办法我可以最初隐藏控件，然后在 audioClick() 函数中添加/删除它们？

Answer 1

您可以在单击后设置控件属性，因此最初您不会看到播放器。当您的 audioClick 函数被调用时，您可以使用任何 HTMLDOMElement的setAttribute()和removeAttribute() API 随意显示或隐藏它们。

您可以在此jsfile中查看这是否是您所需要的