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) ....现在，您的路径并不意味着您的路径意味着您的硬盘上的图像位置

 // 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();
}

音频使用js将图像用于playpause btn

1 个答案: