Question

因此，我在这里输入了音乐播放器代码，但是，我一直试图将带有文本的按钮更改为图像以切换音乐，另外，单击该按钮可以更改图像（静音/取消静音），我是但很困惑，因此欢迎任何评论。

function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

div {}

button {
  top: 0%;
  width: 10%;
  left: 0;
  position: absolute;
}

<audio id="myAudio">
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<div>
  <button type="button" onclick="aud_play_pause()">Play or Pause Music</button>
</div>

Answer 1

您可以使用普通的图像标签，并在该图像上注册EventListener。然后，在每次单击时，相应地更改图像来源。

var button = document.getElementById("button"); // Button global, we need it twice

// EventListener to call the function when the image gets clicked
button.addEventListener("click", aud_play_pause);

function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
    // Making your "button" interactive by changing the source to be another image
    button.src = "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.kNbNpabwx-O1Fh2tvxwYdwHaHa%26pid%3D15.1&f=1";
  } else {
    myAudio.pause();
    // Here too
    button.src = "https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fpng%2F512%2F26%2F26025.png&f=1";
  }
}

#button {
  top: 0%;
  width: 10%;
  left: 0;
  position: absolute;
}

<audio id="myAudio">
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<div>
  <img id="button" src="https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fimage.flaticon.com%2Ficons%2Fpng%2F512%2F26%2F26025.png&f=1" />
</div>

Answer 2

尝试一下（另请参见内联注释）：

<!DOCTYPE html>
<html>
<head>
<style>
div {
}
button {
top:    0%;
width:  10%;
left: 0;
position:   absolute; 
width: 40px;    /* change to the button size that is needed */
height: 40px;   /* change to the button size that is needed */
background-size: 40px;
}

/* change icon based on css class attached */
button.playing{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/54/Breathe-media-playback-pause.svg');
}

button.paused{
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/74/Breathe-media-playback-start.svg');
}

</style>
</head>
<body class='  wsite-theme-light'>

<audio id="myAudio"
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<div>
<button id="play-pause" type="button" onclick="aud_play_pause()" class="paused"></button>
</div>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
document.getElementById("play-pause").className = "playing";  //change css class to playing
  } else {
    myAudio.pause();
document.getElementById("play-pause").className = "paused"; //change css class to paused
  }
}
</script>

<!-- Pre-load icons to avoid lag on click -->
<div style="display: none;"><img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Breathe-media-playback-pause.svg"><img src="https://upload.wikimedia.org/wikipedia/commons/7/74/Breathe-media-playback-start.svg"></div>
<body>

播放和暂停按钮的图标归因：呼吸图标团队：塞巴斯蒂安·波塔，科里·康特罗斯，安德鲁·斯塔尔·波奇基奥[CC BY-SA 3.0（https://creativecommons.org/licenses/by-sa/3.0)]

按钮图标来源：

播放按钮：https://commons.wikimedia.org/wiki/File:Breathe-media-playback-start.svg

暂停按钮：https://commons.wikimedia.org/wiki/File:Breathe-media-playback-pause.svg

Answer 3

您可以像这样向音频标签添加InOut.java属性

controls

Answer 4

使用background-image CSS规则

function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

div {}

button {
  top: 0%;
  width: 10%;
  left: 0;
  position: absolute;
  background: url(https://images.unsplash.com/photo-1526849523480-85fd4e719775);
  background-size: cover;
}

<audio id="myAudio">
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<div>
  <button type="button" onclick="aud_play_pause()">Play or Pause Music</button>
</div>

Answer 5

如果要使用类似按钮的图像，可以设置一个id并为此按钮设置背景图像，然后使用js切换一个类以对其进行动画处理，更改或执行所需操作。

第一个ID：

<button id="play" type="button" onclick="aud_play_pause()">Play or Pause Music</button>

Css。

#play{
  cursor:pointer;
  width:400px;
  height:200px;
  background-image: url('http://lorempixel.com/400/200/');
  background-position: center center;
}

.muted{
  filter:brightness(0.4);
}

还有Js。

function aud_play_pause() {

  var myAudio = document.getElementById("myAudio");

  var play = document.getElementById("play");
  play.classList.toggle('muted');

  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

如何将按钮更改为可点击的图像

5 个答案: