I have a way to play sound with a simple command, https://github.com/admsev/jquery-play-sound, but the audio file I am playing is about 2 minutes long. I need a way to stop/silence the audio with a javascript or jquery command. Does anyone know how I could do this? I don't really want a button that stops the sound unless it was a regular html button that could do other things besides stop the sound.
The jQuery playSound library you linked does not support pausing. I think it would be best to choose a different library that supports pausing so you don’t have to write that functionality yourself.
I used the howler.js library before and it worked fine for me. Here is how you would use howler.js:
<!-- to load the library on the page -->
<script src="howler.js">
// to create and play the sound
var backgroundMusic = new Howl({
urls: ['music.mp3', 'music.ogg'],
}).play();
// to pause the sound
// (make sure the variable `backgroundMusic` is accessible)
backgroundMusic.pause();
// to stop the sound
backgroundMusic.stop();
No jQuery, no plugins, just a browser. This is one button that plays and pauses one MP3. You didn't specify what extra things you wanted one single button to do, so I didn't add any extra functions to that one single lonely button. What other things did you want this one solitary button to do?
Btw, if you want the audio to stop instead of pause:
There's a line in the <style> block that you need to uncomment and a line to comment.
There's a line in the <script> block you need to uncomment.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.play:before {
content: '\25b6';
}
.pause:before {
content: '\275a\275a'; /*Uncomment this line for pause */
/* content: '\25a0'; */ /*Uncomment this line for stop */
}
</style>
</head>
<body>
<button id="button" class="play">
<audio id="audio" src="http://glpjt.s3.amazonaws.com/so/av/pf-righteous.mp3"></audio>
</button>
<script>
var audio = document.getElementById('audio');
var button = document.getElementById('button');
button.addEventListener('click', playPause, false);
function playPause() {
if (!audio.paused) {
audio.pause();
// audio.currentTime = 0; // Uncomment this line for stop
button.classList.remove('pause');
button.classList.add('play');
} else {
audio.play();
button.classList.remove('play');
button.classList.add('pause');
}
}
</script>
</body>
</html>
Related
I am coding an online psychology experiment. Participants have to watch a short movie and remember some information. To analyze the data everyone has to see the same movie, so it would be a problem if people pause it. Therefore, I disabled all controls and autoplay the video.
On Chrome this only works if the player starts mute. So I would like to turn on the sound automatically right after the video starts.
I am trying to use the following html with the video hosted here
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
</head>
<body style="width: 1000px; height: 800px; background-color: grey;">
<div class="container">
<div id="video-player"></div>
</div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container:'#video-player',
video: 'qhRjheS',
width: 720,
height: 480,
autoplay: true,
loop: true,
volume: 0,
style: 'no-controls',
shortcuts: false,
css: '*{pointer-events:none!important;}',
});
player.on('timeupdate', function(time) {player.setVolume(100)});
</script>
</body>
</html>
Where this line is the issue:
player.on('timeupdate', function(time) {player.setVolume(100)});
This works in the console, while the video is running, but crashes if it's put in the script.
Can anyone think of any way to turn on the sound automatically? If there is a small delay after the movie starts, that would be okay.
As an experiment (not a full solution) I'd try something like this:
setTimeout(() => player.on('timeupdate', () => player.setVolume(100)), 3000);
(I took the liberty of changing your code to use arrow functions.)
I suspect that the player isn't immediately ready to have the volume set, and takes a moment to be fully set up and ready to go. I'm not familar with MusePlayer specifically, but I'd look at the docs and see if there are other events, besides the 'timeupdate' event, that you'd want to receive first before setting up the listener for the 'timeupdate' event.
Thanks kshetline for the input. It's indeed a problem for me that chrome blocks autoplay. However, adding an event listener to start the movie on click is a workaround. I guess autostart is not possible, but this way all other controls still remain disabled once the movie starts.
document.body.addEventListener("click", function () {
player.play();
});
I'm working with Howler.js on a little alarm clock I'm working on.
For my alarm clock, I want to play 2 audio files sequentially when the current time matches a predetermined time.
I've got this code:
var play_sound = window[data.sound];
presound.play();
presound.once('end', function(){
play_sound.play();
});
The problem is, this code plays my presound 2 times, and then play_sound afterward. I do not want it to play the presound 2 times, only once.
If I change the code to
presound.play();
play_sound.play();
It seems to work, it doesn't play them at the same time, but I worry that it might in some cases. So I want to avoid these files being played at the same time, and I also want to avoid either of them playing more than once.
How can I do what I'm trying to do while utilizing events to make sure there is no overlap?
I also tried this:
presound.once('play', function() {
presound.once('end', function() {
play_sound.play();
});
});
presound.play();
but it also plays my presound twice.
Here I can see another example with end event:
// Fires when the sound finishes playing.
sound.on('end', function(){
console.log('Finished!');
});
Did you try on instead of once?
UPD:
Cannot reproduce an issue.
A code snippet that I use:
function clickme() {
var presound = new Howl({
src: ['sound.m4a'],
html5: true
});
var play_sound = new Howl({
src: ['sound2.mp3'],
html5: true
});
presound.play();
// Fires when the sound finishes playing.
presound.once('end', function() {
play_sound.play();
});
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.core.min.js"></script>
</head>
<body>
<input type="button" onclick="clickme()" value="Hello" />
</body>
</html>
I may need a little favor for my project
I'm trying to create a play button based on a gif image.
How to make it so the gif would function as a play function javascript?
I'd also want to make it so when I click the gif image it would start playing the animation instead of the gif auto play.
You can just simply
use the css & javascripts below, however you need to use two different type of pictures, first one would be the gif image, and the other one are a regular img type e.g jpeg or png file.:
And if you don't know already if you're using chrome browser, simply right click on your project page then just click inspect, then choose inspect elements, drag it to the element so you would be able to get the specific css id.
<style>
#u11246{
visibility: hidden;
}
</style>
And try this javascript as the follow:
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
document.getElementById("u11236").style.visibility = "hidden";
document.getElementById("u11246").style.visibility = "inherit";
}
function stop(){
var audio = document.getElementById("audio");
audio.pause();
document.getElementById("u11236").style.visibility = "inherit";
document.getElementById("u11246").style.visibility = "hidden";
}
</script>
And use the following code for the audio.
<audio id="audio" src="http://m4a-64.cdn107.com/01/65/45/0165451642.m4a" ></audio>
Good luck!
You could use the following code snippet, to make a custom play button/element:
<button id='playVid'>Play</button>
document.getElementById('playVid').onclick = function (){
document.getElementById('video').play();
};
Check out this info on w3schools.com: https://www.w3schools.com/tags/av_met_play.asp
I have an audio tag in my html, and which I have .wav inside it. With Javascript, I select audio tag and play the wav., which I trigger using a keyboard key. What I am trying to achieve is, for example, on press of each 'A' key, replay the .wav/play the sound from the beginning)
The playing of the audio works okay, and so does the pause too. However, I get a pop noise, while directly pausing the playing .wav.
var audio = document.getElementById(sound);
if (!isPlaying(audio)) {
audio.play(); // works
} else {
audio.pause(); // pops on this line; I checked with commenting below lines.
audio.currentTime = 0;
audio.play();
}
I found this answer, and as far as I understand, it's happening because I instantly set the volume to 0; but I couldn't figure it out for my case. I believe using a fader with setInterval is not a good approach
I also found audio.muted = true, and tried using it before pausing the volume (and used audio.muted = false just before playing the audio), but this also gives pop noise
Update:
I think I need to use fade out to work around this issue. Is there a way to fade out audio instantly?
Update:
I think I need to use fade out to work around this issue. Is there a
way to fade out audio instantly?
You can use .animate() to animate volume property from current value to 0
var audio = $("audio");
$("button").click(function() {
if (audio[0].volume > 0) {
audio.animate({volume:0});
// call `.pause()` here
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio controls src="https://upload.wikimedia.org/wikipedia/commons/6/6e/Micronesia_National_Anthem.ogg"></audio>
<button>fade out audio</button>
Nothing specific, E.g:
I have a video [with controls(Pause, play, forward... ) in a tag] How would you do to: when the video is in the second 30, make a div appear, then, in the second 32, make it disappear.
Thanks :)
If you're using the HTML5 <video> element you can use the ontimeupdate event to track where the playback has got to, as in this example:
// display the current and remaining times
video.addEventListener("timeupdate", function () {
// Current time
var vTime = video.currentTime;
document.getElementById("curTime").textContent = vTime.toFixed(1);
document.getElementById("vRemaining").textContent = (vLength - vTime).toFixed(1);
}, false);
Thanks to Microsoft for their reference
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>Video demo</title>
<script>
// ontimeupdate event handler
function update(e) {
// get the video element id so that we can retrieve the current time.
el = document.getElementById('myVideo');
// set the current time in the page
document.getElementById('timer').innerHTML = el.currentTime;
// If the current time is between 10 and 15 seconds pop-up the
// second div
if (el.currentTime > 20 && el.currentTime <=25) {
document.getElementById('popup').style.display='block';
} else {
document.getElementById('popup').style.display='none';
}
}
</script>
<style>
video {width:300px;}
</style>
</head>
<body>
<video id=myVideo ontimeupdate="update()" src="http://archive.org/download/HardDriveSpinning/HardDriveWebm.webm" autoplay>Sorry - format unsupported</video>
<div id="timer"></div>
<div id="popup" style="display:none">Boo!</div>
</body>
</html>
See it at this fiddle (Works for Firefox and Chrome. IE doesn't like the WebM video format)
You could use window.setTimeout to run a function after a specified amount of time. This won't be enough by itself if the user is able to pause the video. You'd have to tell us more about how you're displaying the video in order to get a more in-depth solution.
But perhaps more importantly, you might want to go back to square one and think again about what you're really trying to accomplish. Because it seems to me that if it seems like you need to trigger DOM manipulations based on the time index of a video, there's probably a better way to do what you really want that doesn't involve that.