CODEWITHSUNDEEP
javascripthtmlcss
noo
noo

Reputation: 149

Display an image on a button with javascript

I create a music play/pause button with HTML, CSS and Javascript and would like the icon to change when the music is played or paused. Here's the JSFiddle: https://jsfiddle.net/gp7yf1t3/5/

HTML:

<audio id="player">
  <source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>

<button id="button"></button>

CSS:

#button {
 background-image: url(https://i.imgur.com/laKFwvv.png);
 width: 64px;
 height: 64px;
 background-repeat: no-repeat;
 background-position: center;
 border: 0;
 border-radius: 50%;
 background-color: rgba(0,0,0,0.25)
}

#button:active { background-color: rgba(255,255,255,0.25); }

body { background: red; }

The current icon is a pause icon, but it's supposed to be a play icon. I also added "pause" when it's pause but I want to make it an icon instead.

Javascript:

var button = document.getElementById("button");
var audio = document.getElementById("player");

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    button.innerHTML = "test";
  } else {
    audio.pause();
    button.innerHTML = "test";
  }
});

I tried it with symbol characters but it didn't look really nice and would resize because the symbols weren't the same size. I'd like the button to look nice. My only option right now is to add a play/pause button that doesn't change.

Upvotes: 3

Views: 716

Answers (3)

Himali Patel
Himali Patel

Reputation: 118

in this example i using button tag

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
	audio = new Audio();
	audio.src = "https://www.soundjay.com/free-music/midnight-ride-01a.mp3";
	audio.loop = true;
	audio.play();
	// Set object references
	playbtn = document.getElementById("playpausebtn");
	// Add Event Handling
	playbtn.addEventListener("click",playPause);
	// Functions
	function playPause(){
		if(audio.paused){
		    audio.play();
		    playbtn.style.background = "url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat";
	    } else {
		    audio.pause();
		    playbtn.style.background = "url(https://image.flaticon.com/icons/svg/148/148744.svg) no-repeat";
	    }
	}
	
}
window.addEventListener("load", initAudioPlayer);
button{ border:none; cursor:pointer; outline:none; }

button#playpausebtn{	background:url(https://image.flaticon.com/icons/svg/189/189889.svg) no-repeat;
	width:10%;
	height:100px;
  
  display: block;
    margin: auto;
  
}
<html>
<body>

<button id="playpausebtn"></button>
  
</body>
</html>

Upvotes: 1

emare
emare

Reputation: 54

You can insert an <img> tag inside the button like so:

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    buttons.innerHTML = '<img src="https://i.imgur.com/laKFwvv.png" />';
  } else {
    audio.pause();
    buttons.innerHTML = '<img src="https://some/play/icon.png" />';
  }
});

Upvotes: 2

Oliver
Oliver

Reputation: 3138

You are using a background image, so you can simply swap that image using button.style.backgroundImage = 'url(./path/to/image.png)', like so:

var button = document.getElementById("button");
var audio = document.getElementById("player");

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    button.style.backgroundImage = 'url(https://i.imgur.com/laKFwvv.png)';
  } else {
    audio.pause();
    button.style.backgroundImage = 'url(./path/to/image/play.png)';
  }
});
#button {
 background-image: url(https://i.imgur.com/laKFwvv.png);
 width: 64px;
 height: 64px;
 background-repeat: no-repeat;
 background-position: center;
 border: 0;
 border-radius: 50%;
 background-color: rgba(0,0,0,0.25)
}

#button:active { background-color: rgba(255,255,255,0.25); }

body { background: red; }
<audio id="player">
  <source src='https://audio.jukehost.co.uk/c926ef6560961d5fd02e35e1488a5997e8217bc1/1a1c12c319a' type='audio/mpeg'/>
</audio>

<button id="button"></button>

Upvotes: 0

Related Questions