是否有可能使音頻元素的控件在點擊事件中出現/消失？

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

您可以在點擊後設置controls屬性，所以最初您不會看到播放器。當您的audioClick函數被調用時，您可以使用任何HTMLDOMElement的setAttribute()和removeAttribute() API隨意顯示或隱藏它們。

你可以看看你是否需要這個jsfidle