Play and pause sound with SpaceBar - javascript

I'm trying to play and pause a sound with JS.
The sound is already playing, but i want to be able to pause and unpause it.
case 32: //SpaceBar
if (play){
$("#leson").pause();
play = false;
} else {
$("#leson").play();
play = true;
}
break;
And before i wrote this :
<embed id="leson" src="edito.wav" autostart="true" hidden="true"
loop="false">
What am i doing wrong here ?
Thanks.

Change embed to HTML5 audio. And autoplay instead of autostart.
My solution doesn't uses jQuery.
See the code below and check it working here.
You need to click the result page to focus the page and be able to play/pause with spacebar.
<audio id="leson" src="edito.wav" autoplay="true" hidden="true" loop="false"/>
<script>
var play = true;
var myAudio = document.getElementById("leson");
function onKeyDown(event) {
switch (event.keyCode) {
case 32: //SpaceBar
if (play) {
myAudio.pause();
play = false;
} else {
myAudio.play();
play = true;
}
break;
}
return false;
}
window.addEventListener("keydown", onKeyDown, false);
</script>

audio elements have play and pause methods.
var myAudio = document.getElementById('myAudioElement');
myAudio.play();
myAudio.pause();
And seeing you are using jQuery, you need to get the DOM element from the jQuery object. You should do:
$("#leson")[0].play();
$("#leson")[0].pause();

Related

Make same button play/pause html5 video

So i had this working at one point eventually i broke it and now i need to get it working again.
I want for when you press the PLAY button the video will start playing. and the PLAY button will change it text to say PAUSE. Then when you click it again the video will pause.
HTML:
<video id="myVideo" width="1024" height="576">
<source src="myaddiction.mp4" type="video/mp4">
<source src="myaddiction.mp4.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<button id="button" onclick="playPause(); ">PLAY</button>
SCRIPT:
var vid = document.getElementById("myVideo");
function playPause() {
vid.play();
}
function playPause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
} else {
change.innerHTML = "PLAY";
}
}
Here is also a fiddle with everything in it. If you know how to get a video working in it that'd be cool if you'd add it. Thanks!
https://jsfiddle.net/wb83hydn/
**EDIT: currently the problem is the video wont play when the button is pressed. The button changes text but the video does nothing.
You are defining your playPause function 3 separate times. You are likely to get some unexpected results. That is, if the interpreter doesn't error out completely. You will be better served with just creating one function, and use a global variable to handle the tracking of the play/pause state. Something like this:
var vid = document.getElementById("myVideo");
var isPlaying = false;
function playPause() {
var change = document.getElementById("button");
if (isPlaying) {
vid.pause();
change.innerHTML = "PLAY";
} else {
vid.play();
change.innerHTML = "PAUSE";
}
isPlaying = !isPlaying;
}
Change your javascript to this to make it work.
You'll need to make sure the DOM is loaded first by using window.onLoad or putting the JS at the end of the HTML file.
I updated the JSFiddle, but you'll need a valid online video file to make it work.
var vid = document.getElementById("myVideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
function playPause() {
var change = document.getElementById("button");
if (change.innerHTML == "PLAY") {
change.innerHTML = "PAUSE";
play();
} else {
change.innerHTML = "PLAY";
pause();
}
}
https://jsfiddle.net/wb83hydn/3/
Play and pause video by the same button
document.getElementById("play").onclick = function() {
if(document.getElementById("video").paused){
document.getElementById("video").play();
this.innerHTML ="Pause";
}else{
document.getElementById("video").pause();
this.innerHTML = "Play";
}
}

Play and Pause with onclick on the same Img

The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});

Audio Player mute button (HTML5 and Javascript)

I am trying to create a mute button to my website's custom audio player. Apparently, this simple thing gives me a real headache.
As you see below, I have tried to ad an IF statement to the button. If the volume is on and I press the button, mute the volume. else, if the volume si muted, unmute it.
<audio id="audio" >
<source src="material/audio/sound.mp3"
type='audio/mpeg;
codecs="mp3"'/>
</audio>
<button ID="mute"
onclick="muteAudio()">
<img src="material/images/mute.png"
ID="mute_img"/>
<script type="text/javascript">
function muteAudio() {
var audio = document.getElementById('audioPlayer');
if (audio.mute = false) {
document.getElementById('audioPlayer').muted = true;
}
else {
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
}
</script>
You need to use == (comparison) rather than = (assignment):
if (audio.mute == false)
{
document.getElementById('audioPlayer').muted = true;
}
else
{
audio.mute = true
document.getElementById('audioPlayer').muted = false;
}
or probably better would be to use the ! (not) operator:
if (!audio.mute)

Show poster image or pause button when HTML5 video is paused?

Hi I'm coding a local site for an iPad and have a video without controls that plays and pauses when clicked on. Is it possible to show the poster image when the video is paused? Or show a pause button in the center? Here's the code I have for playing and pausing:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
}//]]>
</script>
and the HTML for the video
<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4" type="video/mp4">
</video>
Another solution is to call:
video.load()
It will redisplay the poster image. it will restart the video on next interaction, but you can save the time stamp and start playing from there if you wish.
You will have to register pause event on the video.
Something like this:
JSFiddle code
Of course you should modify this for your needs and add some structure. Haven't tried it on iPad though. Also to note: registering click will introduce 300ms lag on tap event. You should look at touchstart event for touch devices and register both click and touchstart.
var overlay = document.getElementById('video-overlay'),
video = document.getElementById('video'),
videoPlaying = false;
function hideOverlay() {
overlay.style.display = "none";
videoPlaying = true;
video.play();
}
function showOverlay() {
// this check is to differentiate seek and actual pause
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying = true;
}
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);

How use 2 audio players and stop one when other is playing

So i have one audio player in my page with two play buttons, and i need to stop and play the player works with this two buttons.
I'm using html5 and js/jquery for do this, but i can't finding a way to stop audio-player 1 when i start audio-player 2, someone can help?
My jsfiddle: http://jsfiddle.net/j08691/LqM9D/9/
My 2cents, it will detect with button is clicked, and change the other one's text back to "play"
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
var second_playbutton = ($(this).attr("id") == "playpause")
? "playpause2"
: "playpause"
$("#" + second_playbutton).html("play");
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
you can just use one class name for each button and control them at one time
<button class="player-control" id="playpause">play</button>
<audio id="player">
<source src="http://96.47.236.72:8364/;" />
</audio>
<!-- here the other button that needs to start sound too -->
<button class="player-control" id="playpause2">play</button>
<script type="text/javascript">
window.player = $('#player')[0];
$('.player-control').click(function () {
if (player.paused) {
player.play();
$('.player-control').html('pause');
} else {
player.pause();
$('.player-control').html('play');
}
});
</script>

Categories