Display an image on a button with javascript - 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.

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

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>

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>

Related

How can I disable a JQuery function by clicking on a button, but keep it on by default?

I'm creation a video player which redirects to another video page when the video is over.
I want to add a 'Turn Auto Play Off Button' to disable the redirection script.
How can I do that?
My code:
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
</script>
You could remove the listener that fires at the end using unbind()
For jQuery < 1.7 use bind()/unbind()
$('#turnOfAutoPlay').click(function() {
$('#myVideo').unbind('ended');
})
Note: With jQuery 3.0 and up .bind()/.unbind() is deprecated. Use
on()/off()
function videoEndedHandler () {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
}
$(document).ready(function() {
document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});
$('#turnOfAutoPlay').on('click', function() {
document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})
Use global variable for setTimeout function and on click of your "Turn Auto Play Off Button" call clearTimeout
Sample code:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
Edit: here you go
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
function myStopFunction() {
clearTimeout(myVar);
}
</script>
I modified my code a bit with the help of above discussions, but I think it's lil bulky 😅😅, But it works...
My Code:
const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');
var myVar;
function videoEndedHandler () {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 10000)
}
//By default autoplay is on.
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
autoplayCheckbox.addEventListener('change', function() {
if (this.checked) {
//if autoplay is on
document.getElementById("demo").innerHTML = "Autoplay: On";
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
} else {
//if autoplay is off
document.getElementById("demo").innerHTML = "Autoplay: Off";
video.removeEventListener('ended', videoEndedHandler);
}
});
function myStopFunction() {
clearTimeout(myVar);
document.getElementById("autoplayCheckbox").checked = false;
document.getElementById("demo").innerHTML = "Autoplay: Off";
}
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.4s linear;
background-color: #8ecae6;
font-family: 'oswald';
}
.checkbox {
opacity: 0;
position: absolute;
}
.checkbox:checked + .label .ball {
transform: translateX(23px);
}
.label {
background-color: #111;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50px;
position: relative;
padding: 5px;
height: 26px;
width: 50px;
transform-scale(2.2);
}
.ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: 22px;
width: 22px;
transition: transform 0.3s linear;
}
<br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
<div class="ball"></div>
</label>
</div>
<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>
The Turn Of Autoplay button only works when 10sec Timeout function is going on..
I added that button because in the main project it also works as a button to dismiss the modal Have a look
Can i minify it??

How to Open a link (web page) in fullscreen mode, javascript?

simply I need to open a new page in fullscreen.
So, users press a button and then a video (hidden on main page) is open in fullscreen and start to play. When user press button to close fullscreen or press "esc" key, video will pause, fullscreen is closed and iframe is not visible...
I'm try to get this demo works, but with no results.
Also I can make it works only if I open only the video element, not iframe...
const fullscreen = document.querySelector('.playnow');
const video = document.querySelector('#myvideo');
fullscreen.addEventListener('click', toggleFullScreen);
// Create fullscreen video button
function toggleFullScreen() {
if(video.requestFullScreen){
video.requestFullScreen();
} else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
} else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
};
video.classList.remove("d-none");
}
body{
margin:0;
padding:0;
}
.video-container{
width:100%;
height:100vh;
margin: 0 auto;
position:relative;
background-image: url(https://images.unsplash.com/photo-1616485828923-2640a1ee48b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
#myvideo{
}
.d-none{
display:none;
}
<div class="video-container">
<button class="playnow">Open Video in Fullscreen Mode</button>
<video width="100%" autoplay id="myvideo" class="d-none">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
I've tried:
https://gomakethings.com/how-to-play-a-video-in-full-screen-mode-when-its-thumbnail-is-clicked-with-vanilla-js/ (better demo, but video still visible after fullscreen is closed...)
https://www.hongkiat.com/blog/html5-fullscreen-api/
But no appreciable results.
Thank you, Luca
I think you can try something like that.
const btn = document.querySelector('button')
const screenWidth = window.screen.availWidth;
const screenHeight = window.screen.availHeight
function openFullscreenWindow() {
window.open('https://github.com', '_blank', `width=${screenWidth},height=${screenHeight}`)
}
btn.addEventListener('click', openFullscreenWindow)
<button>Open fullscreen</button>
Maybe a found a solution reading this post on medium: https://medium.com/#roidescruzlara/controlling-the-full-screen-mode-cda0fae4c4f2
And now I can use it as I need.
Thank you so much.
var currentWindowHeight = window.innerHeight;
var element = document.getElementById("container");
var btn = document.getElementById("btn-screen-mode");
var film = document.getElementById("film");
var isFullScreen = false;
window.addEventListener("keydown", useCustomFullScreen.bind(this));
window.addEventListener("resize", isExitingFullScreen.bind(this));
/**
* Gets available exitFullscreen method
*/
function getRequestFullScreen() {
return (
element.requestFullscreen ||
element["mozRequestFullscreen"] ||
element["msRequestFullscreen"] ||
element["webkitRequestFullscreen"]
);
}
/**
* Gets available requestFullscreen method
*/
function getExitFullscreen() {
return (
document["webkitExitFullscreen"] ||
document["msExitFullscreen"] ||
document.exitFullscreen
);
}
/**
* Prevents browser to enter the default fullscreen mode and uses the custom fullscreen method
*/
function useCustomFullScreen(event) {
if (event.key === "F11") {
event.preventDefault();
toggleFullScreen();
}
}
/**
* Detects if the browser is exiting fullscreen mode when window resize
*/
function isExitingFullScreen() {
if (isFullScreen && currentWindowHeight >= window.innerHeight) {
isFullScreen = false;
currentWindowHeight = window.innerHeight;
// Do your full screen mode stuff
updateBtn();
}
}
/**
* Update button appearance according to the current screen mode
*/
function updateBtn() {
if (isFullScreen) {
btn.classList.remove("enter-fullscreen");
btn.classList.add("exit-fullscreen");
element.classList.remove("d-none");
film.play();
return;
}
btn.classList.remove("exit-fullscreen");
btn.classList.add("enter-fullscreen");
element.classList.add("d-none");
film.pause();
}
/**
* Toggles the fullscreen mode using available fullscreen API
*/
function toggleFullScreen() {
if (!isFullScreen && getRequestFullScreen()) {
getRequestFullScreen().call(element);
} else {
getExitFullscreen().call(document);
}
currentWindowHeight = window.innerHeight;
isFullScreen = !isFullScreen;
// Do your full screen mode stuff
updateBtn();
}
.container {
position: relative;
width: 100%;
height: 100%;
}
#container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.intro{
width:100%;
height:100vh;
}
.intro video{
max-width:100%;
height:auto;
object-fit: cover;
}
.d-none{
display:none;
}
#btn-screen-mode {
width: 30px;
height: 30px;
border-radius: 5px;
border: 0;
padding: 0;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
.enter-fullscreen {
position: absolute;
top:0;bottom:0;left:0;right:0;
margin: auto;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1674/PNG/512/expand_111060.png);
}
.exit-fullscreen {
border: 2px solid #000;
position: absolute;
top:20px;
right:20px;
z-index:2322333;
background-image: url(https://cdn.icon-icons.com/icons2/1673/PNG/512/collapseoutline_110793.png);
}
<div class="intro">
<button id="btn-screen-mode" class="enter-fullscreen" onclick="toggleFullScreen()"></button>
<video autoplay loop muted playsinline="true" webkit-playsinline="true">
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
</video>
</div>
<div class="container d-none" id="container">
<button id="btn-screen-mode" class="exit-fullscreen" onclick="toggleFullScreen()"></button>
<video loop playsinline="true" webkit-playsinline="true" id="film">
<source src="//d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8" type="video/mp4">
</video>
</div>

function not defined onclick with javascript

i am trying to play audio file on click of div, and then with the next click of the div pause it. However, I am very new to javascript and the first function isn't even executing, and i don't understand how it isn't defined.
here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
border: 3px solid red;
}
.player
</style>
</head>
<script>
var has_been_played = 0;
function playSound() {
var aud=new Audio(file);
aud.play();
var b1 = document.getElementbyId("box" + num);
var b1.has_been_played == true;
}
var b1.has_been_played = pauseAud() {
document.getElementById("box" + num).setAttribute("onClick",
"javascript: pauseAud();");
}
function pauseAud() {
var aud=new Audio(file);
aud.pause();
}
</script>
<body>
<div id="box1" class="floating-box" onclick="playSound('donttalk.mp3');"></div>
<div id="box2" class="floating-box" onclick="playSound('goodvibrations.mp3');"></div>
</body>
</html>
I want it to play the sound, and then once it has been clicked the variable changes to "has_been_played" and the next time you click that div the audio file will pause. (hopefully then, the next you click it it will play again.
Why is it saying that the function playSound is not defined onclick?
You need to add the function to the window like so:
function playSound(){
aud.play();
var b1= document.getElementbyId("box"+num);
var b1.has_been_played == true;
}
window.playSound = playSound;

How can I use jquery to play audio with a toggling play and pause button?

I'm new to javascript. This probably isn't the right way to go about what i'm trying to achieve but, as the title says, I'm trying to play an audio file and toggle between two images which act as the pause and play button. Below is what I have so far, I can't seem to get the pause button to hide and the play button to show.
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/track.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
if (audioElement.paused) {
audioElement.play();
$('.pause').show();
$('.play').hide();
}
else {
audioElement.pause();
$('.play').show();
$('.pause').hide();
}
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
Would someone be able to point out where I'm going wrong?
In your code you're missing an extra }); at the end of the code.
I don't know if you want to play the audio on page load or on click of a button, as you didn't specified that, that's why I will provide you two different ways of implementing, first who starts the audio on page load and second that starts the audio playing on click of a button (also using new Audio instead of createElement(audio)). Both ways are great.
If you want to do it your way you could add event listeners for playing and paused. This is a way to do it:
var audioElement = document.createElement('audio');
audioElement.id = 'audio-player';
audioElement.controls = 'controls';
audioElement.autoplay = 'autoplay';
audioElement.src = 'http://www.archive.org/download/bolero_69/Bolero.mp3';
audioElement.type = 'audio/mpeg';
audioElement.addEventListener('playing', function() {
$('.pause').css('display', 'inline-block');
$('.play').hide();
}, false);
audioElement.addEventListener('paused', function() {
$('.pause').hide();
$('.play').css('display', 'inline-block');
}, false);
$('.play').on('click', function() {
$(this).hide();
$('.pause').css('display', 'inline-block');
audioElement.play();
});
$('.pause').on('click', function() {
$(this).hide();
$('.play').css('display', 'inline-block');
audioElement.pause();
});
.play,
.pause {
width: 50px;
height: 50px;
display: inline-block;
}
.play {
background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat;
background-size: cover;
}
.pause {
background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat;
background-size: cover;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='play'></span>
<span class='pause'></span>
Another simple way would be to use new Audio():
var audioElement = new Audio('http://www.archive.org/download/bolero_69/Bolero.mp3');
$('.play').on('click', function() {
$(this).hide();
$('.pause').css('display', 'inline-block');
audioElement.play();
});
$('.pause').on('click', function() {
$(this).hide();
$('.play').css('display', 'inline-block');
audioElement.pause();
});
.play,
.pause {
width: 50px;
height: 50px;
display: inline-block;
}
.play {
background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat;
background-size: cover;
}
.pause {
background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat;
background-size: cover;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='play'></span>
<span class='pause'></span>

Toggle Play/Pause image buttons HTML5 Video

I have this code
var video = document.getElementById('player');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
});
.buttons{
display:block;
width:50px;
height:50px;
background-color:black;
float:left;
}
#control{
width:1000px;
height:50px;
clear:both;
background-color:black;
}
<div id="control">
<img class="buttons"src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png" onClick="document.getElementById('player').play();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" onClick="document.getElementById('player').pause();"/>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png" id="mute">
</div>
And I wish to make Play/Pause button toggle like mute button currently does.
https://jsfiddle.net/t6t0maw7/
I tried duplicating javascript and editing it with play/pause functions but with no luck.
Be free to edit jsfiddle.net and correct answer will be accepted.
JS Codes
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
css
button{
height:50px;
width:50px;
border:none;
outline:none;
}
button.play{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png");
background-size:100%;
}
button.pause{
background:url("http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png");
background-size:100%;
}
Here is updated fiddle
Even kiran Gopal answer is correct.
I wanted to provide code i edited a little bit and it is working like charm.
I defined button images in javascript instead of css.
<video src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/video-za-SaB.mp4" autoplay="true" loop="true" width="100%" height="auto" id="plejer"></video>
<div id="control">
<img src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png" id="play-pause" class="play"></img>
<img class="buttons" src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png" id="mute">
</div>
<script>
var video = document.getElementById('plejer');
video.volume = 0;
var muteBtn = document.getElementById('mute');
muteBtn.addEventListener('click',function(){
if(video.volume == 1){
video.volume = 0;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-off-beli-1.png";
}
else{
video.volume = 1;
muteBtn.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/sound-on-beli-1.png";
}
});
var playPause = document.getElementById("play-pause");
playPause.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/pause-beli-1.png";
// Update the button text to 'Pause'
playPause.classList.toggle('pause');
} else {
// Pause the video
video.pause();
playPause.src="http://omniawebfactory.com/unik/wp-content/uploads/2016/10/play-beli-1.png";
// Update the button text to 'Play'
playPause.classList.toggle('pause');
}
});
</script>
<style>
.buttons{
display:block;
width:25.6px;
height:25.6px;
float:left;
}
.play{
display:block;
width:25.6px;
height:25.6px;
float:left;
margin-right:5px;
}
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:88%;
left:4%;
z-index:1;
}
#media only screen and (max-width: 500px) {
#control{
width:1000px;
height:25.6px;
clear:both;
position:absolute;
top:73%;
left:4%;
z-index:1;
}
</style>

Categories

Resources