CODEWITHSUNDEEP
javascripthtmlcss
adam
adam

Reputation: 67

How to change button to clickable image

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>

Upvotes: 1

Views: 234

Answers (5)

Chema
Chema

Reputation: 365

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

Upvotes: 0

jediKnight
jediKnight

Reputation: 796

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

Upvotes: 1

CodeF0x
CodeF0x

Reputation: 2682

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>

Upvotes: 1

Tobiq
Tobiq

Reputation: 2657

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>

Upvotes: 0

cikavuve
cikavuve

Reputation: 51

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>

Upvotes: 0

Related Questions