I played an audio with the following code:
var audio;
function playAudio(y){
audio = new Audio(y);
audio.play();
}
Now I want to stop this audio from another function. I cannot find any audio.stop(). Please note I want to stop not pause.
Related
Having trouble playing audio on "touchstart" and then pausing audio on "touchend". I am using Howler.JS library to do so. Please let me know if you can help. Goal is to just play some audio as the user touches anywhere on the screen. Then pause the audio when the user lifts their finger. At the moment, I have the audio playing ontouch. However, the pause listener is not responding. Any ideas?
Howler JS link: https://github.com/goldfire/howler.js
<script>
document.addEventListener("touchstart", function(event) {
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
sound.play();
});
document.addEventListener("touchend", function(event) {
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
sound.pause();
sound.currentTime = 0;
});
</script>
It's been a long time without using Howler but I think the issue is that the Howler sound instances are different. When you do:
var sound = new Howl({
src: ['./audio/spray.mp3'],
});
You create a different instance with a different ID. If I remember correctly you can pause the sound with the ID or referencing the same instance.
So, you have to keep a reference to the sound instance being played.
I have multiple audio players, each with a play and stop button, on one page. The only issue I have is when you click one play button, and then another, they play on top of one another. Can someone help me with the code I would need to stop whatever song is playing when another play button is clicked. Here's are my code. Thank you
function disableButton(btn) {
document.getElementById(btn.id).disabled = true;
}
function change() {
var image = document.getElementById('image');
image.src = "https://lms.testing.com/je_audio/html/button2.png"
}
#btn1 {
border: none;
padding: 0;
background: none;
}
<audio id="player">
<source src="https://lms.testing.com/els_audio/PATAudios/Q1.mp3" type="audio/mpeg">
Your browser has not support the audio element.
</audio>
<div>
<button id="btn1" onclick="document.getElementById('player').play('play'); disableButton(this)"><img src="https://lms.testing.com/je_audio/html/button1.png" width="95" height="28" alt="button" id="image" onclick="change();"></button>
</div>
Listen for the play event on all the <audio> elements.
Whenever one audio element starts playing, pause all the other ones.
// Get all <audio> elements.
const audios = document.querySelectorAll('audio');
// Pause all <audio> elements except for the one that started playing.
function pauseOtherAudios({ target }) {
for (const audio of audios) {
if (audio !== target) {
audio.pause();
}
}
}
// Listen for the 'play' event on all the <audio> elements.
for (const audio of audios) {
audio.addEventListener('play', pauseOtherAudios);
}
What you have to do is for all the elements first to stop the audio that was previously running audio and then change their images back to play, and try to play the audio for the current media button you are using. Using Class to detect all the Elements using
document.querySelectorAll('.playerButton')
this will help you find all the player button and similarly give a class like AudioFile to that audio that you are using and use the stop() function to stop the audio and then start the audio for the current button clicked using this function.
I hope this will help you, in executing the functionality you are trying to achieve.
you can use the below-given function as an example on how to stop the audio
function stopAudio(audio) {
audio.pause();
audio.currentTime = 0;
}
stopAudio(audio)
I'm using Vimeo api in my project, but I have a problem with volume setting.
If I do so:
// Create the player
var player = new Vimeo.Player('video2', options);
//Ready event
player.ready().then(function() {
player.play();
});
Everything works, but without sound.
However, if I do so:
// Create the player
var player = new Vimeo.Player('video2', options);
//Ready event
player.ready().then(function() {
player.play();
player.setVolume(0.5);
});
The video does not play, and the screen hangs his screensaver.
What could be the problem?
Essentially by calling play when the video is ready, you are attempting to autoplay. However, this volume problem occurs because browsers no longer allow autoplay with sound (especially Chrome). You can read more about this on our Help article as well.
Therefore, it is impossible to programmatically play a video with volume without a user clicking/interacting with the video first. Only afterwards will a call to setVolume work.
How would I play an audio file in javascript that has been spliced into two byte arrays and loaded separately from a server at different times? I want to load the first half of an mp3 file, then, while the mp3 is playing, load the second half and seamlessly continue playing through the whole file.
You can use the canplaythrough and ended events to, play the first audio while loading the second, then play the second after loading. Something like this:
var canPlayAudio2 = false;
var audio1Ended = false;
var audio = document.createElement('audio');
audio.src = "your_audio_source";
audio.addEventListener('canplaythrough', function() {
//after first audio loads, start loading second audio
var audio2 = document.createElement('audio');
audio2.src = "your_audio2_source";
audio2.addEventListener('canplaythrough', function() {
canPlayAudio2 = true;
if (audio1Ended) {
audio2.play();
}
});
//play the first audio, play second audio if availible once finished
audio.play();
audio.addEventListener('ended', function() {
audio1Ended = true;
if (canPlayAudio2) {
audio2.play();
}
});
});
While the first part is playing, create another audio tag to pre-load the second half, but do not play it.
<audio src="the second half.mp3” preload="auto"></audio>
When the first audio trigger the ended event, change its URL to the second half.
The browser will get the file from cache and starts to play it immediately.
Sorry for my poor English, hoping this helps.
I have a bunch of youtube urls which i would like to play. I want like to play only the audio content in a basic HTML player with user controls like Play, pause, next. I am unable to add user control functionality(Nor able to play the videos in a HTML player, i am embedding the youtube video), thus the user has to click on the play button of the next video every time a video is completed. Any help will be appreciated.
..continuing from the comments:
That's right you need to use js. I'll help you start: you can create an array with all your youtube urls:
var youtube_urls = ['https://www.youtube.com/watch?v=vpoi_l4jkyU', 'https://www.youtube.com/watch?v=Lml2SkB68ag', 'https://www.youtube.com/watch?v=awMiY-Ve1As'];
And then, using the api you listen for when a video is done playing and then start the next one:
Detect end video: How to detect when a youtube video finishes playing?
OR
Just create a playlist on youtube and embed the playlist. It'll loop through all the videos.
this should get you started:
// change this list to whatever you want
var urls = ['http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg',
'http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'];
var idx=0;
var aud= document.getElementById('aud');
aud.src=urls[idx];
aud.addEventListener('ended', next); // for automatically starting the next.
function play(){
aud.play();
}
function pause(){
aud.pause();
}
function next(){
idx++;
if(idx === urls.length) idx=0;
aud.src = urls[idx];
aud.play();
}
<audio id = 'aud'></audio>
<button onclick="play();">play</button>
<button onclick="pause();">pause</button>
<button onclick="next();">next</button>