音頻使用js將圖片用於playpause btn

Question

我是js的新手，所以原諒我。我正在使用帶有js的html5音頻標籤來僅顯示播放和暫停按鈕。我想改變文字&暫停與圖像。像playbtn.png和pausebtn.png一樣。這是我卡住的地方。

HTML :::

<!-- hidden audio player --> 
<audio id="audio" controls autoplay hidden=""> 
    <source src="music/eatForTwo.wav" type="audio/wav"> 
    <source src="music/eatForTwo.mp3" type="audio/mpeg"> 
    <p>Your Browser Doesn't Support The HTML5 audio Element</p> 
</audio> 

<button id="playpause" title="play" onclick="togglePlayPause()" ><img id="imgbtn" src="music/pausebtn.png"/></button> 
<!-- javascript for audio control 
--> 
<script src="code/html5audio.js" type="text/javascript"> 

</script> 

JS :::

// Grab a handle to the video 
    var audio = document.getElementById("audio"); 
    // Turn off the default controls 
    audio.controls = false; 

function togglePlayPause() { 
var playpause = document.getElementById("playpause"); 
if (audio.paused || audio.ended) { 
    playpause.title = "pause"; 
    playpause.style.backgroundImage = "url(music\pausebtn.png)"; 
    audio.play(); 
} 
else { 
    playpause.title = "play"; 
    playpause.style.backgroundImage = "url(music\playbtn.png)"; 
    audio.pause(); 
} 
} 

Answer 1

編輯您的js如下，但是你必須改變url(c:\folder\img.jpg)到url(yourPath) ....現在yourPath並不意味着yourPath它表示圖像在硬盤上的位置

// Grab a handle to the video 
    var audio = document.getElementById("audio"); 
    // Turn off the default controls 
    audio.controls = false; 

function togglePlayPause() { 
var playpause = document.getElementById("playpause"); 
if (audio.paused || audio.ended) { 
    //playpause.title = "pause"; 
    playpause.style.backgroundImage = "url(c:\folder\img.jpg)"; 
    audio.play(); 
} 
else { 
    //playpause.title = "play"; 
    playpause.style.backgroundImage = "url(c:\img1.jpg)"; 
    audio.pause(); 
}