Hello I have a series of audio clips.
<div class="audio-wrapper">
<audio controls>
<source src="aduio1.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio2.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio3.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
<source src="aduio4.mp3" type="audio/mpeg">
</audio>
</div>
In my actual code the audio is spread out through a large wordpress page.
I was wondering if it was possible to play the next one after one above it finishes? For example if one near the top of html is played then it will find the next down and play that, and so one.
For example if someone pressed play on the first one and it finished till the end. The one below it would start playing, and so on.
Another example if someone hit play on the 3rd one and that one finished, Then the 4th one would start playing.
Thanks for any help!
(think podcast site)
You can attach ended event to ".audio-wrapper audio" selector, check if $(this).parent(".audio-wrapper").next(".audio-wrapper") exists using .is(), if true, call .play()
const src = "https://upload.wikimedia.org/wikipedia/commons/4/4d/%22Pollinate%22-_Logic_Synth_and_Effects_Demonstration.ogg";
$(".audio-wrapper audio")
.each(function() {
this.src = src;
})
.on("ended", function(event) {
let next = $(this).parent(".audio-wrapper")
.next(".audio-wrapper").find("audio");
console.log(next)
if (next.is("*")) {
next[0].play()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
<div class="audio-wrapper">
<audio controls>
</audio>
</div>
Related
I need to play a video (webm) and an audio (m4a) file at the same time on a browser that only accepts one media playing at a time (if I try to play them simultaneously on separate <video> and <audio> elements, the previous gets paused automatically).
Does anyone know what can I do?
Control the play of two media using JavaScript.
Try this:
function Players() {
var audio_player = document.getElementById('audio');
var video_player = document.getElementById('video');
audio_player.play();
video_player.play();
}
<button onClick="Players()">PLAY</button>
<br>
<br>
<audio id="audio" controls="controls">
<source src="audio.wav" type="audio/wav">
</audio>
<br>
<video id="video" width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
</video>
Foe example I have this code
<input type="file" id="thefile1" accept="audio/*" />
I want to play this audio by using javascript. How can I do?
You can do this in one of two ways. Since you asked for JavaScript, you just want so set autoplay to true. The second way would be to do the same but set autoplay="true" on the video element itself.
In your case, if you don't want autoplay, you just need to run .play() on your video element.
Just to Play the Video
document.getElementById('playButton').addEventListener('click', (e) => {
const video = document.getElementsByTagName('video')[0];
video.play();
});
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
Autoplay options
JavaScript Option
const video = document.getElementsByTagName('video')[0];
video.autoplay = true;
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Option
<video width="320" height="240" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Reference http://america.wtf/Shadex
The site has audio that auto plays. However there is a videos page. I want to have it so that when you play the videos it auto pauses the music
<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls>
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var video = document.currentScript.parentElement;
video.volume = 0.1;
</script>
</audio>
see below for updated sample which will:
Pause the audio when you play the video
Play the audio when you pause the video
note the I removed the onClick from the video element, and also added an explicit id to the <video> element to make directly referencing it easier
<div id="videos" style="z-index:1"><br />
<div align="center" id="videobox">Splash
<video style="z-index:-1;" width="400" controls id="video">
<source src="media/videos/splash.mp4" type="video/mp4">
<source src="media/videos/splash.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</div>
<audio id="sitemusic" controls autoplay>
<source src="media/turbo_grid.ogg" type="audio/ogg">
<source src="media/turbo_grid.mp3" type="audio/mpeg">
Your browser does not support the audio element.
<script>
var audio = document.currentScript.parentElement;
audio.volume = 0.1;
var video = document.getElementById("video");
// this event listener reacts to "play" happening on video element and enacts pause on the audio element
video.addEventListener('play', function (){document.getElementById("sitemusic").pause()},false);
// this event listener reacts to "pause" happening on video element and enacts play on the audio element
video.addEventListener('pause', function (){document.getElementById("sitemusic").play()},false);
</script>
</audio>
I am a student studying computer programming. Chrome and Firefox are not loading my video or audio.
<p>
<audio controls>
<source src="Piano.mp3" type="audio/mpeg">
</audio>
</p>
<p>
<video width="320" height="240" controls>
<source src="Son.mp4" type="video/mp4">
</video>
</p>
You need to put Son.mp4 and Piano.mp3 at the same folder as the html
Something really akward is happening in my code, the autoplay for audio is not working.
Basically, every website code that i put this code the music autoplays but in this one is not working.
Find the footer code:
<footer>
<ul>
<h1>
<img src="images/topoPirelli.png" alt="">
</h1>
</ul>
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
</audio>
</footer>
</div>
</body>
</html>
I had the same problem.
I solved it by using jquery in the end:
$('audio').on('canplay', function() {
this.play();
});
Edit:
Nowadays I noticed a lot of browsers don't allow autoplay to work if the video sound. So a solution could be adding the muted attribute.
<video autoplay muted>
Try this:
<audio class="audio" controls autoplay>
<source src="./1.ogg" type="audio/ogg">
<source src="./1.mp3" type="audio/mpeg">
<!-- <embed height="50" width="100" src="./1.mp3"> NOT NECESSARY -->
</audio>