stackoom
  简体   繁体   中英

How to change button to clickable image

 原文  2019-04-14 00:25:38  9   5    javascript/ html/ css

Question

So I've my music player code here, however, I've been trying to change the button with text to an image to toggle the music, also that when clicked changes the image (mute/unmute images) I am a but stumped so any comments would be welcome. 

 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>

5 answers

solution1
 1 ACCPTED  2019-04-14 00:45:41

You can use a normal image tag and register an EventListener on that image. Then, on every click, change the image source accordingly. 

 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>

solution2
 1  2019-04-14 01:42:15

Try this (also see the inline comments): 

<!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>

Play and pause button icon attribution: Breathe Icon Team: Sebastian Porta, Cory Kontros, Andrew Starr-Bochicchio [CC BY-SA 3.0 ( https://creativecommons.org/licenses/by-sa/3.0)]

Button icon sources:

Play button: https://commons.wikimedia.org/wiki/File:Breathe-media-playback-start.svg

Pause button: https://commons.wikimedia.org/wiki/File:Breathe-media-playback-pause.svg

solution3
 0  2019-04-14 00:38:22

you could add controls attribute to your audio tag like so 

<html>
<head>
<style>
div {
}
button {
top:    0%;
width:  10%;
left: 0;
position:   absolute; 
}
</style>
</head>
<body class='wsite-theme-light'>

<audio id="myAudio" controls>
 <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>
</div>
<script>
</script>

solution4
 0  2019-04-14 00:42:09

Use the background-image css rule 

 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>

solution5
 0  2019-04-14 00:45:24

If you want to use an image like button you can set an id and set a background image to this button, and then toggle a class with js to animate, change or do what you want with it.

First the 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);
}

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question clickable button over clickable image How to convert a portion of image to clickable button? How to add an image overlay to clickable button How to change the area surround a menu button to make it clickable? Making a clickable button change text how to link chatbot html file to a clickable image or button How to change a clickable <a> tag to an image with the same function within JQuery Javascript How to change clickable image in HTML table row dynamically? Change script tag to clickable image Change Input to image and make it clickable
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM