I'm trying to get create a button to pause and play a video and change the innerHTML when clicked. This is what I've tried and I cant understand why it's not working. Can anyone help please:
function play() {
var video = document.getElementById("video1");
video.play();
}
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function () {
if (video.paused === true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
var video = document.getElementById("video1");
var playButton = document.getElementById("play-pause");
playButton.addEventListener("click", function () {
if (video.paused === true) {
video.play();
playButton.innerHTML = "Pause";
} else {
video.pause();
playButton.innerHTML = "Play";
}
});
Related
The audio is playing in a loop as per the if statement, but it is not pausing as per the else statement. Why is this happening?
I also tried:
if(...) { ... } else if(...) { ... }
because if I use else on its own then nothing works.
What am I doing wrong?
Here is my code:
function loop(){
var audio1 = new Audio('./sounds/tom-1.mp3');
var input1 = document.getElementById('input1');
if(input1.checked == true) {
audio1.play();
audio1.loop = true;
} else if (input1.checked == false) {
audio1.pause();
audio1.loop = false;
}
}
And the HTML:
<label class="switch">
<input type="checkbox" id="input1" onclick="loop()">
<span class="slider round"></span>
</label>
You are creating new Audio every time you click, so you are pausing a new one, not the one that is currently playing.
let audio;
function loop() {
if (!audio) {
audio = new Audio("./sounds/tom-1.mp3");
}
let input1 = document.getElementById("input1");
if (input1.checked == true) {
audio.play();
audio.loop = true;
} else if (input1.checked == false) {
audio.pause();
audio.loop = false;
}
}
P.S.
Remember to never use var
I've been having this problem where audio wouldn't play. I am trying to get a random sound to play but nothing happens when I click on the image (which has an onclick="playRandomSound()"). This is my code.
var sound1 = new Audio("InDeed.wav");
var sound2 = new Audio("Indeed2.wav");
var sound3 = new Audio("Yeeees.wav");
var sound4 = new Audio("girl_shut_up.wav");
var sound5 = new Audio("imhmmm.wav");
var randomizer;
function playRandomSound(){
randomizer = Math.floor(Math.random()*5);
if (randomizer === 0){
sound1.play();
} else if (randomizer == 1){
sound2.play();
} else if (randomizer == 2){
sound3.play();
} else if (randomizer == 3){
sound4.play();
} else if (randomizer == 4){
sound5.play();
}
}
body {
background: white;
}
#rokas {
height: 100vh;
}
<HTML>
<HEAD>
</HEAD>
<BODY>
<img src="https://i.imgur.com/4lO3dpT.jpg" id="rokas" onclick="playRandomSound()">
</BODY>
</HTML>
Please try to update your code like this:
html:
<audio style="display: none;" id="sound"></audio>
js:
function playRandomSound () {
var sound = document.getElementById('sound');
randomizer = Math.floor(Math.random()*5);
if (randomizer === 0){
sound.src = sound1;
} else if (randomizer == 1){
sound.src = sound2;
} else if (randomizer == 2){
sound.src = sound3;
} else if (randomizer == 3){
sound.src = sound4;
} else if (randomizer == 4){
sound.src = sound5;
}
sound.load();
sound.play();
}
Hope it helps.
Add the tag...
<audio id="audioPlaceHolder" src="InDeed.wav" autostart="false" ></audio>
You can dynamically change the src from your JavaScript.
For playing it...
var sound = document.getElementById('audioPlaceHolder');
sound.play();
enjoy!
I currently have a function set up in my global.js file that starts a song and pauses it if the 4 key is pressed. However, when I implement this function it causes my routing to stop working. So in my mainMenu.js file when you press the 1 key it should bring you to game.html but nothing happens. I'm not sure of what is causing this interference. Any ideas as to how I can stop this from happening
global.js:
window.onload = function(){
}
//music
var audio = new Audio('/music/oregonMusic.mp3')
function checkSound(){
audio.play();
document.onkeypress = function(e){
if(audio.paused){
audio.play();
}
else if(!audio.paused && e.keyCode === 52){
audio.pause();
}
}
}
checkSound();
mainMenu.js:
window.onload = function(){
//console.log('swing');
checkSound();
}
document.onkeypress = function(e){
//console.log('key pressed: ' + e.keyCode)
if(e.keyCode === 49){
window.location = 'game'
}
else if(e.keyCode === 51){
window.location = "topTen"
}
}
using
document.onkeypress = function(e) { ... }; // 1
document.onkeypress = function(e) { ... }; // 2
results in only function // 2 being called on keypress
instead, you should use addEventListener
so, global.js
document.addEventListener('keypress', function(e) {
if(audio.paused){
audio.play();
}
else if(!audio.paused && e.keyCode === 52){
audio.pause();
}
});
and mainMenu.js
document.addEventListener('keypress', function(e) {
if(e.keyCode === 49){
window.location = 'game'
}
else if(e.keyCode === 51){
window.location = "topTen"
}
});
now both handlers will be called
It's a simple program which starts the audio in HTML as variable in betNo in javascript starts from 0.
But I am having trouble stopping the audio when variable reaches 10. I have reduced the original code to make it simpler. The counter is necessary for my program so removing it can't be an option. You can see the varible count in the console.
You can use jquery to solve as I am already using it.
Thank you in advance.
document.addEventListener('DOMContentLoaded', function(event) {
var betNo = 0;
var boxTimer = setInterval(function() {
var myAudio = document.getElementById('songOne');
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
if ((betNo == 0) || (betNo == 10)) {
togglePlay();
}
console.log(betNo);
betNo++;
if (betNo >= 20) {
clearInterval(boxTimer);
}
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
I have edited my answer.
The button to start the timer will allow the sound to be played on safari mobile
The timer doesn't re-declare variables and functions like it did before
You could make it cleaner with less global variables but I don't know how the rest of your code would be affected by this so I didn't change it.
<button onclick=start()>start</button>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> <audio id = "songOne" src = "http://www.sousound.com/music/healing/healing_01.mp3" preload = "auto" > </audio>
<script>
// declaring variables
var betNo = 0 ;
var myAudio = document . getElementById ( 'songOne' );
var isPlaying =false;
var togglePlay=function(){
if (isPlaying) {
myAudio . pause (); }
else {
myAudio . play (); } };
myAudio . onplaying = function () { isPlaying = true ;};
myAudio . onpause = function () { isPlaying = false ;};
var start=function(){
// setTimer with only the necessary code inside so variables are not being declared more than once
boxTimer = setInterval ( function (){ if (( betNo == 0 )||( betNo == 10 )){
togglePlay (betNo); }
console . log ( betNo );
betNo ++; if ( betNo >= 20 ){
clearInterval ( boxTimer ); } }, 1000 ); }
</script>
The solution is much simpler (cause was just a silly mistake). Thanks #Rory McCrossan for pointing that out in the comments.
I just took the var isPlaying = false; out of the setInterval function, otherwise it was being set to false even if the song was playing.
document.addEventListener('DOMContentLoaded', function(event) {
var betNo = 0;
var isPlaying = false;
var boxTimer = setInterval(function() {
var myAudio = document.getElementById('songOne');
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
if ((betNo == 0) || (betNo == 10)) {
togglePlay();
}
console.log(betNo);
betNo++;
if (betNo >= 20) {
clearInterval(boxTimer);
}
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
document.addEventListener('DOMContentLoaded', function(event) {
var betNo = 0;
var boxTimer = setInterval(function() {
var myAudio = document.getElementById('songOne');
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
if ((betNo == 0) || (betNo == 10)) {
togglePlay();
}
console.log(betNo);
betNo++;
if (betNo >= 20) {
clearInterval(boxTimer);
}
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
document.addEventListener('DOMContentLoaded', function(event) {
var betNo = 0;
var boxTimer = setInterval(function() {
var myAudio = document.getElementById('songOne');
var isPlaying = false;
function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
if ((betNo == 0) || (betNo == 10)) {
togglePlay();
}
console.log(betNo);
betNo++;
if (betNo >= 20) {
clearInterval(boxTimer);
}
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="songOne" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
I'm still working on a music player, mouse controls have been assigned, but I'm having little trouble with keyboard events on the PLAY/PAUSE button.
So far, I got the user to be able to "click" the PLAY button by pressing SPACEBAR. What happens is that the PLAY button is being hidden and replaced by the PAUSE button.
Which I want now is getting the user to be able to press the SPACEBAR again so it "clicks" PAUSE, and therefore shows PLAY again.
Here is what I have :
html
<div>
</div>
script
<script>
/* mouse */
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
/* keyboard */
var play = document.getElementById("play");
var pause = document.getElementById("pause");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
};
</script>
What am I missing ?
the mistake is here:
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
} else if(e.keyCode == 32) {
pause.click();
}
};
the second condition cannot be executed because everytime the keyCode is 32 it's goes only in the first conditions.
You can declare a variable "isPlaying" that indicate you if the player is playing.
var isPlaying = false;
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if (isPlaying) {
pause.click();
} else {
play.click();
}
isPlaying = !isPlaying; // if true equal false, if false equal true
}
};
the first mistake is that you arent closing all brackets,the second is this part of code:
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
i suggest to use a variable for check if the button play is being pressed or not:
var ispaused = true;
var play = document.getElementById("play");
var pause = document.getElementById("pause");
$('#play').on('click', function(event) {
ispaused = false;
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
/* keyboard */
});
$('#pause').on('click', function(event) {
ispaused = true;
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if(ispaused == true ){
play.click();
}else{
pause.click();
}
}
};
fiddle
It works. you double check space keyCode when you space anytime and the first condition would be true every single time.
Second, you need to use $bla instead for $("#blablabla") .It runs almost 600 line Code with find object you select everytime.So don't be let duplicate work.
Final,$() is lik $(doucument).ready().It's all done when rendered it's done and DOM it's OK.THAT IS!
** code **
$(function () {
let $play = $("#play");
let $pause = $("#pause");
$play.on('click', function (event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$pause.show();
$play.hide();
});
$pause.on('click', function (event) {
//currentPlayingTrack.pause();
$pause.hide();
$play.show();
});
/* keyboard */
document.onkeydown = function (e) {
if (e.keyCode == 32) {
toggle = !toggle;
$play.trigger("click");
}
else if (e.keyCode == 32) {
toggle = !toggle;
$pause.trigger("click");
}
};
});
Seems like you're missing a bit more knowledge of js which will come with time :) Here's a codepen on how I'd accomplish this.
http://codepen.io/smplejohn/pen/zNVbRb
Play
Pause
$('.playpause').click(function(){
$('.playpause').toggle();
return false;
});
document.onkeydown = function (e) {
if (e.keyCode == 32){
$('.playpause').toggle();
}
};