I visit this site all the time to search for solutions, but I couldn't find an answer to my question.
I want to add multiple audio files to a page. So I used the following coding. What this does is when you click one file, it starts playing the music, when you click the next file the rest will pause. That's what I wanted.
But I also want the play/pause option on each file; so when you click the "listen/pause" link for "Night Swim", it starts playing, and when you click the same link again, it will stop.
Is there any way I can do this? I'm not very handy with Javascript, I tried all sorts of other codes but nothing seems to work the way I want it.
I hope someone can help me and I hope my problem is explained correctly (I'm Dutch, I apologize for my English :S )
Here's my code:
<audio id="1">
<source src="everynight-snippet.mp3" type='audio/mpeg'>
</audio>
<audio id="2">
<source src="nightswim-snippet.mp3" type='audio/mpeg'>
</audio>
Every Night (Listen/Pause)
Night Swim (Listen/Pause)
And the script:
<script>
ids = new Array(2); // an array with total number of ids
function aud_play_pause(idNumber) {
var idNumber = document.getElementById(idNumber);
for(var i=0; i<ids.length; i++){
document.getElementById(i+1).pause(); // Pause all ids before playing next file.
document.getElementById(i+1).currentTime = 0; // Set the time back to zero, else it will replay from the pause point.
}
idNumber.play();
}
</script>
So to sum it up:
If I click the first song (Every Night), it starts playing. When I click it again, it should stop playing.
If I click the second song (Night Swim) while the first one plays, the first song should stop playing and the second song should start. If I click the second song again, it should stop.
etc
You could check if the idNumber audio is playing using the currentTime property, and start it if it is not. Otherwise, if the current one is playing you can stop all of them anyway.
ids = new Array(2); // an array with total number of ids
function aud_play_pause(idNumber) {
var clickedAudio = document.getElementById(idNumber);
for (var i = 0; i < ids.length; i++) {
if ((i + 1) == idNumber && clickedAudio.currentTime == 0) { // if it's the current one and is not playing
clickedAudio.play(); // start it
} else { // either not the current one, or the current one but it is playing
document.getElementById(i + 1).pause(); // Pause all ids before playing next file.
document.getElementById(i + 1).currentTime = 0; // Set the time back to zero, else it will replay from the pause point.
}
}
}
The way you had wrote your code though the for paused all elements.
Related
I am working on a script so that it fetches a random video and continuously keeps playing random videos back to back once the previous video is finished playing. It worked when I played the videos as mp4s in the video element, but when I rewrote the script to play them as embedded videos in an iframe, nothing shows up at all.
I just cannot seem to make it work. Any help would be greatly appreciated.
Thanks in advance.
<iframe class="frame" src="" width="640" height="360"></iframe>
<script>
var lastVideo = null;
var selection = null;
var player = document.getElementsByClassName("frame")[0]; // Get video element
var playlist = ["https://www.youtube.com/embed/qXYb8R3_B0k", "https://www.youtube.com/embed/Gi1P6UFTioQ", "https://www.youtube.com/embed/l_pR5obOwss"]; // List of videos
player.autoplay = true;
player.addEventListener("ended", getRandomUrl); // Run when video ends
function getRandomUrl(player) {
while (selection == lastVideo) { // Repeat until different video is selected
selection = Math.floor(Math.random() * playlist.length);
}
lastVideo = selection; // Remember last video
player.src = playlist[selection]; // Location of new video
}
getRandomUrl(player); // Select first video
player.play(); // Start video
</script>
I would guess that your eventListener for "ended" never triggers because a video is never started in the first place.
The solution in this case would be set a random video to the src attribute as the default and then the eventListener takes care of the rest.
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>
I have two audio elements that play through a button's click event. I've successfully managed to pause one if another is selected but also need to set the paused element back to 0.0 seconds (i.e pause and reset).
I'm aware that Javascript currently doesn't have a stop() method which led assume that this would be done by setting its currentTime to 0. If so I just haven't been able to figure out the best way to incorporate this method in my code.
Right now I'm pausing all audio elements in the latter half of the conditional using $(".audio").trigger("pause"); which doesn't too efficient performance wise. What would be the best way to pause and reset only the previously played audio file and not every one on the page?
http://jsfiddle.net/txrcxfpy/
use below code . check DEMO
$(function() {
$('.track-button').click(function() {
var reSet = $('.track-button').not($(this)).siblings(".audio").get(0);
reSet.pause();
reSet.currentTime = 0;
var $this = $(this),
trackNum = $this.text(),
currentAudio = $this.siblings(".audio"),
audioIsPaused = currentAudio.get(0).paused;
if (audioIsPaused) {
currentAudio.get(0).play();
} else {
currentAudio.get(0).pause();
}
});
});
Sorry about the confusing title, but I have the following problem. I am working on a site where people can press a link and play a song, but in a page where there are multiple links (for playing songs), users can press all the links and all the songs start to play at the same time. So, this makes the current selected song difficult to hear.
So, what I am trying to do is, to cancel / stop the last playing song when a new link is pressed. Here is my code:
<div class='content'>
click <a href="javascript:play_wav('h');" class='h play-audio'> here </a>
to play the song
</div>
function play_wav(audio_name)
{
var src = document.querySelector('.'+audio_name).innerHTML =
"<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
document.querySelector('.audio_'+audio_name).play();
}
Don't mind the bad quality, but as you can see, when the link is pressed, the DOM integrates an <audio src='audio/foo.wav' class='audio_foo"'>
then the script finds the audio_foo class and plays the songs.
But when another link is pressed, how do I reset the DOM to it's original state or just stop it from playing a previously started song?
You can keep a reference to the currently playing song.
var current_audio;
function play_wav(audio_name)
{
if (current_audio)
{
current_audio.stop();
}
var src = document.querySelector('.'+audio_name).innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
current_audio = document.querySelector('.audio_'+audio_name);
current_audio.play();
}
I've never used audio in javascript before, but I'm assuming there is a stop function if there is a play function.
Hope this helps!
Something like this:
function play_wav(audio_name) {
// List of all audio tags
var audios = document.querySelectorAll('audio')
//Iterate over all
for (var i = 0; i < audios.length; i++) {
var audio = audios[i]
// Stop playing
audio.pause()
// Remove node
audio.parentNode.removeChild(audio)
}
var audio = document.querySelector('.'+audio_name)
audio.innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>"
audio.querySelector('audio').play()
}
We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?
Note: I have found the following:
Start HTML5 video at a particular position when loading?
But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.
You could use the timeupdate event listener.
Save the start time and duration time to variable after loadedmetadata event.
// Set video element to variable
var video = document.getElementById('player1');
var videoStartTime = 0;
var durationTime = 0;
video.addEventListener('loadedmetadata', function() {
videoStartTime = 2;
durationTime = 4;
this.currentTime = videoStartTime;
}, false);
If current time is greater than start time plus duration, pauses the video.
video.addEventListener('timeupdate', function() {
if(this.currentTime > videoStartTime + durationTime){
this.pause();
}
});
If you are able to set start time and end time of video while setting the video url.
you can specify the start and end time in the url itself like
src="future technology_n.mp4#t=20,50"
it will play from 20th second to 50th second.
There are a lot of nuances to using the javascript solution proposed by Paul Sham. A much easier course of action is to use the Media Fragment URI Spec. It will allow you to specify a small segment of a larger audio or video file to play. To use it simply alter the source for the file you are streaming and add #t=start,end where start is the start time in seconds and end is the end time in seconds.
For example:
var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;
document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;
This will update the player to start the source video at the specified time and end at the specified time. Browser support for media fragments is also pretty good so it should work in any browser that supports HTML5.
Extend to michael hanon comments:
IE returns buffered.length = 0 and seekable.length = 0. Video doesn't play. So solution:
src="video.mp4#t=10,30"
will not works in IE. If you would like to support IE only way is to use javascript to seek video just after start from 0 second.