0

私は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();
}
}
4

1 に答える 1

0

次のように js を編集しますが、変更url(c:\folder\img.jpg)する必要がurl(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();
}
于 2012-11-03T19:19:09.413 に答える