I have a button that plays an audio file when you click playAudio with the text "PLAY VOICE AUDIO", and the text is changed to "PAUSE VOICE". It pauses if you click playAudio again(now with the text "PAUSE VOICE") when playing.
I would like the button text to go back to the "PLAY VOICE AUDIO" once the audio file has finished playing.
Thanks for any help in advance!
<div class="center">
<button id="playAudio">PLAY VOICE AUDIO</button>
</div>
<audio id="testAudio" hidden src="testaudioagainmp3.mp3" type="audio/mpeg"></audio>
<!-- Play/pause audio script -->
<script>
document.getElementById("playAudio").addEventListener("click", function() {
var audio = document.getElementById('testAudio');
if(this.className == 'is-playing') {
this.className = "";
this.innerHTML = "PLAY VOICE AUDIO"
audio.pause();
} else {
this.className = "is-playing";
this.innerHTML = "PAUSE VOICE";
audio.play();
}
});
</script>
var audio = document.getElementById('testAudio');
var btn = document.getElementById("playAudio");
audio.addEventListener('ended', function() {
btn.innerHTML = "PLAY VOICE AUDIO";
btn.className = "";
});
You are currently only have an event listener for clicks on your button playAudio. You need a second event listener for when the audio has ended playing. In this case it is simply the ended event, which you need to attach to your audio variable with addEventListener.
Below is the the code I would use.
// This part is just a refactored version of your current code.
var audio = document.getElementById('testAudio');
var playButton = document.getElementById('playAudio');
playButton.addEventListener('click', function() {
if(this.className == 'is-playing') {
this.className = "";
this.innerHTML = "PLAY VOICE AUDIO"
audio.pause();
} else {
this.className = "is-playing";
this.innerHTML = "PAUSE VOICE";
audio.play();
}
});
// This runs when the audio ends and will change the `playButton`'s text to be "PLAY VOICE AUDIO"
audio.addEventListener('ended', function() {
playButton.innerHTML = 'PLAY VOICE AUDIO';
playButton.className = '';
}
I would also suggest learning some ES6(the newest JavaScript version), but I have left the code as is.
Related
I have a HTML code:
<audio src="whale-music.mp3" id="audio"></audio>
<button class="oi oi-media-play b-play" id="play" onclick="play()"></button>
and the script:
<script>
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').removeClass('oi-media-play')
document.getElementById('play').addClass('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').addClass('oi-media-play')
document.getElementById('play').removeClass('oi-media-pause')
}
}
It plays and pauses the song but it doesn't change classes, neither it returns to playing at point it was stopped (it plays from the beginning). What's wrong with this code?
us this code
function play() {
var audio = document.getElementById('audio');
if (audio.paused) {
audio.play();
document.getElementById('play').classList.remove('oi-media-play')
document.getElementById('play').classList.add('oi-media-pause')
}else{
audio.pause();
audio.currentTime = 0
document.getElementById('play').classList.add('oi-media-play')
document.getElementById('play').classList.remove('oi-media-pause')
}}
the "removeClass" and "addClass" is a jquery syntax
if you use native code:
document.getElementById('play').classList.remove('oi-media-play');
document.getElementById('play').classList.add('oi-media-pause');
or Jquery:
$('#play').removeClass('oi-media-play');
I tried to play sound when the page is loaded, but it's not working never but when I click on button the sound is working.
JavaScript
<script>
$( document ).ready(function() {
let audio = new Audio('sounds/sound.mp3');
let is_play = true;
let btn = document.getElementById("sound_btn");
audio.play();
$("#" + btn.getAttribute("id")).click(function () {
if (is_play) {
btn.innerText = "Play Sound";
is_play = false
audio.pause();
} else {
btn.innerText = "Pause Sound";
is_play = true;
audio.play();
}
});
});
</script>
You’re probably using Google chrome which prevents playing audio files upon loading, you can check your log for such an error.
Audio files has to has to be played after a user’s event (as clicking).
I tried to achieve this in chrome by doing like this..
video::-webkit-media-controls-fullscreen-button {
display: none;
}
It is sometimes not working. I need a permanent solution for this very badly.
I am requesting the people:
This is not a duplicate question for any other in SO.
That solution is not working, test it if you want.
That's why I asked this again.
You can create you own control (you have to do the styling but I think that should not be a problem).
JSFiddle
Tutorial with explanations
The HTML5:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="https://www.w3schools.com/htmL/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
Download the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen" disabled>Full-Screen</button>
</div>
</div>
And this as JavaScript.
$( document ).ready(function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
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";
}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
});
I can't wrap my head around this code from w3schools for a javascript play/pause event.
let video = document.getElementById("myVideo");
let btn = document.getElementById("myBtn");
function myFunc() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
if the video paused is true then the video should play and the btn should display Pause. But shouldn't it be the other way round? If the video is paused then video.pause() should be there?
Remember, the action is performed when you click the button, so imagine if the video is playing and the function is executed, then the following snippet runs:
video.pause(); // the played video is now paused
btn.innerHTML = "Play"; // the button now shows 'Play' from what it was before 'Pause'
When the function is executed again (when it is paused) the code checks if it is paused and if it is then it means it needs to play hence the following snippet:
if (video.paused) { // Was the video paused? If yes...
video.play(); // We now play the video as it was paused
btn.innerHTML = "Pause"; // We changed the button text from 'Play' to 'Pause'
}
The comments in the above snippets should clarify further.
This might have been answered before but I have searched for hours and can't find anything without jquery on getting this to work and I don't really understand the bind method or how that works.
I just need my video to display a message once it is finished.
For some reason any time I try to use video.ended I get null back instead of true or false.
Also not sure why my setInterval is apparently wrong.
HTML:
<video id="videoAllUrBase" poster="images/all-ur-base-poster.png">
<source src="video/All Your Base Are Belong To Us.mp4" />
<source src="video/All Your Base Are Belong To Us.mp4.ogg" />
<source src="video/All Your Base Are Belong To Us.mp4.webm" />
<p>Your browsers does not support video</p>
</video>
<br></br>
<input id="playButton" type="button" onclick="playVideo();" value="Play" />
<input id="skipButton" type="button" onclick="skip(10);" value="Skip" />
<input id="rewButton" type="button" onclick="skip(-10);" value="Rewind" />
<p id="vidMessage">Click the Play button to start the video.</p>
JavaScript:
function playVideo(){
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if(video.paused){
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
}
function checkEnd{
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
if(video.ended){
message.innerHTML = "The video has ended, click Play to restart the video.";
}
}
setInterval(checkEnd, 1000);
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
Instead of using setInterval to check for the video's status, listen for the ended event to know when it ends. Here's your code with the changes I'd use:
function playVideo() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
var button = document.getElementById('playButton');
if (video.paused) {
video.play();
button.value = "Pause";
message.innerHTML = "The video is playing, click the Pause button to pause the video.";
} else {
video.pause();
button.value = "Play";
message.innerHTML = "The video is paused, click the Play button to resume the video.";
}
video.onended = videoEnded;
}
function videoEnded() {
var video = document.getElementById('videoAllUrBase');
var message = document.getElementById('vidMessage');
message.innerHTML = "The video has ended, click Play to restart the video.";
}
function skip(value) {
var video = document.getElementById("videoAllUrBase");
video.currentTime += value;
}
While it probably wouldn't affect your setup, it could be more useful to use addEventListener to bind the event.
References:
https://developer.mozilla.org/en-US/docs/DOM/Media_events
https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener