在aud_play_pause（）中更改圖標

Question

我有一個完美播放和停止曲目的圖像。我正在嘗試將圖像源從play.png更改爲pause.png，具體取決於曲目是否播放。

這裏是我的代碼，正在開始/停止音頻，只有一個靜態play.png圖像。如何在pause.png和play.png之間使用javascript更改src屬性？

<img src='play.png' onclick="aud_play_pause()"> 

<audio id="audio1"> 
    <source src="audio1.mp3" type="audio/mp3"> 
</audio> 

<script> 
var myAudio=document.getElementById("audio1"); 

function aud_play_pause(){ 
    if (myAudio.paused){ 
     myAudio.play(); 
    } else { 
     myAudio.pause(); 
    } 
} 
</script> 

Answer 1

你要使用JavaScript的DOM操作功能，改變這種像這樣：

var myAudio = document.getElementById("audio1"); 
var image = document.getElementsByTagName("img")[0]; 

function aud_play_pause(){ 
    if (myAudio.paused){ 
     myAudio.play(); 
     image.setAttribute("src", "pause.png"); 
    } else { 
     myAudio.pause(); 
     image.setAttribute("src", "play.png"); 
    } 
} 

雖然最好是通過其ID引用img元素，我用它的標籤名稱，因爲它那裏是唯一的一個。