So I made a script in JavaScript that would play a mp3 file and then there would be an image that you would click on to toggle whether on not the audio should play. When I click on the picture it stops playing the mp3 file which is what I wanted it to do but when I click on it again it doesn't resume or start over the song.
<script type="text/javascript">
var audio = document.getElementById("myAudio");
function detectmob() {
if( navigator.userAgent.match(/Android/i) //Checks if on mobile
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
audio.play();
}
}
function Pause() {
if (audio.play = false) {
audio.play()
}
else {
audio.pause();
}
}
window.onload = detectmob;
</script>
<center> <input type="image" onclick="Pause()" src="/images/Nor.gif" style="width:750px;height:400px;"></center>
Your condition check audio.play = false is wrong, it is assigning the value false to play property overriding the default function reference.
You can use the paused property to check whether the audio is paused.
function Pause() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
Related
I'm trying to set rewrite some shortcut function for video. Everything works fine except when pressing spacebar. Here's my code:
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
e.preventDefault();
e.stopPropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
Here I use spacebar and P to toggle play and pause. Using spacebar somehow toggled two times while using P not.
I try adding event listener of keyup and keypress to reject the spacebar input. But It doesn't work too.
Is there anything about the HTML5 Video I am missing?
Since the spacebar by default plays and pauses the video, you have to invert functions in your ternary operator. No need to change them when dealing with the p tag.
So the only way is to handle the two different key codes in 2 different ifs.
See below the working code snippet.
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
else if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
If you cannot split it, what about nesting the if-else?
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if (e.which == 32 || e.which == 80) {
if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
} else {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
let video = document.getElementById("video")
video.addEventListener("keydown", (e) => {
if ([32,80].includes(e.which)) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
I am working on a project that when I used a specific keyboard's key a different sound must be played. I have a created a function to play the sound, then I attached an Event Listener to the DOM & finally I checked which key has been pressed & play the sound who correspond with the key.
I am trying to do this by writing DRY code. How can I change variable sound value when calling the function to play the sound file?
I have a tried changing the var sound = New Audio('filepath'); before calling the function playSound() but it doesn't work.
var sound = new Audio('assets/sounds/clap.wav');
// function to play sounds
function playSound() {
sound.play();
}
// adds event listener & checks keyboard to play different sounds
document.addEventListener('keydown', function(event){
if(event.keyCode == 65){
playSound();
} else if ( event.keyCode == 83 ) {
playSound();
}
else if( event.keyCode == 68 ) {
playSound();
}
else if( event.keyCode == 70 ) {
playSound();
}
});
You can pass the filepath in the conditionals and assign the audio filepath in the function like this:
var sound = new Audio('assets/sounds/clap.wav');
function playSound(filepath) {
sound.src = filepath;
sound.play();
}
// adds event listener & checks keyboard to play different sounds
document.addEventListener('keydown', function(event){
if(event.keyCode == 65){
playSound('somefilepath');
} else if ( event.keyCode == 83 ) {
playSound('somefilepath');
}
else if( event.keyCode == 68 ) {
playSound('somefilepath');
}
else if( event.keyCode == 70 ) {
playSound('somefilepath');
}
});
I have a play/pause button and I want to check whether its text is "Play" or "Pause" when the user clicks on it.
window.PlayPauseButton = document.getElementById("PlayPauseButton");
PlayPauseButton.onclick = function() //when you click the play or pause button
{
if( window.PlayPauseButton.innerHTML == "Pause" )
{
window.PlayPauseButton.innerHTML = "Play";
clearInterval( window.TheTimer );
}
else
{
window.PlayPauseButton.innerHTML = "Pause";
}
};
But it doesn't work! I can't compare innerHTML with a string.
You need to check with innerText, not innerHTML
PlayPauseButton.onclick = function() //when you click the play or pause button
{
if( window.PlayPauseButton.innerText== "Pause" )
{
window.PlayPauseButton.innerText= "Play";
clearInterval( window.TheTimer );
}
else
{
window.PlayPauseButton.innerText= "Pause";
}
};
If you're using a button tag, try using innerText instead:
if (window.PlayPauseButton.innerText == "Pause" ){
window.PlayPauseButton.innerHTML = "Play";
clearInterval( window.TheTimer );
}
else {
window.PlayPauseButton.innerHTML = "Pause";
}
This will only work if you're using <button>Play</button>.
If you're using an <input type="button"> you're going to need to compare the value instead of innerText.
I have this script which should pause the HTML5 video when space bar is pressed. Bur in Firefox it pauses on all keys you press no matter is space or other and in Chrome it doesen't work at all.
Also double clicking the video doesen't go to full screen.
$(window).keypress(function(e) {
if (e.keyCode == 0) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
$video.dblclick(function() {
video.mozRequestFullScreen();
video. webkitRequestFullscreen();
video.requestFullscreen();
});
fiddle: http://jsfiddle.net/6f7navgu/4/
Try the snippet below
var video = document.getElementById('video_id');
document.onkeypress = function(e){
if((e || window.event).keyCode === 32){
video.paused ? video.play() : video.pause();
}
};
To have the video in fullscreen mode, use the following one
var video = document.getElementById("video_id");
document.ondblclick = function(){
if(video.requestFullscreen){
video.requestFullscreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}
};
Working jsBinl
Use keyup and Event.keyCode === 32 instead. Fiddle
If you like, you could use keydown as well in this case, because you're not testing for an input value.
Ok this is jquery and it pause and plays video with space and on video window click:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('#videoID').click(function(){this.paused?this.play() :this.pause();});
$(window).keypress(function(e) {
if (e.keyCode == 32 || e.keyCode === 32) {
$('#videoID').get(0).paused?$('#videoID').get(0).play() :$('#videoID').get(0).pause();
}
});
</script>
Double clicking wouldn't go to full screen; you would have to add that action. As for pause, try which property of the jQuery event.
$(window).keypress(function(e) {
// debugger;
if (e.which == 32) {
if (video.paused == true)
video.play();
else
video.pause();
}
});
Uncomment the debugger so that you can inspect the event that happened.
Try this snippet
$(window).keypress(function(e) {
if (e.which == 32) {
video.paused ? video.play() : video.pause();
}
});
video.ondblclick = function(){
video.requestFullscreen();
};
I'm trying to reset my audio on typing on the same key I used to play it
HTML :
<audio preload="auto" id="sound1" src="sons/nadal.ogg" src="sons/nadal.mp3"></audio>
JS :
$(document).keydown(function(e){
var son_1 = document.getElementById('sound1');
if (e.keyCode == 65) {
son_1.play();
son_1.currentTime = 0;
return false;
}
});
Works perfectly to launch it, but I want to stop it when i type on the same key. I tried lots of solution found on the internet but I don't achieved to make one work.
Thank you very much for your help !!!
You should be able to check the property 'paused' to determine if the audio tag is playing or not:
$(document).keydown(function(e){
var son_1 = document.getElementById('sound1');
if(e.keyCode == 65){
son_1.currentTime = 0;
if(son_1.paused)
son_1.play();
else
son_1.pause();
return false;
}
});