Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to play HTML blocks one by one with no pops and clicks?
To play HTML audio blocks sequentially without gaps or clicks, use the onended event to chain audio playback seamlessly.
HTML Structure
First, set up multiple audio elements with unique IDs:
<audio id="one"> <source src="new1.mp3" type="audio/mp3"> </audio> <audio id="two"> <source src="new2.mp3" type="audio/mp3"> </audio> <audio id="three"> <source src="new3.mp3" type="audio/mp3"> </audio>
Basic Sequential Playback
Use the onended event to automatically play the next audio when the current one finishes:
<html>
<body>
<audio id="one">
<source src="new1.mp3" type="audio/mp3">
</audio>
<audio id="two">
<source src="new2.mp3" type="audio/mp3">
</audio>
<script>
var one = document.getElementById('one');
one.onended = function() {
document.getElementById('two').play();
};
one.play();
</script>
</body>
</html>
Enhanced Sequential Player
For multiple audio files, create a more robust solution that handles any number of tracks:
<html>
<body>
<audio id="audio1">
<source src="track1.mp3" type="audio/mp3">
</audio>
<audio id="audio2">
<source src="track2.mp3" type="audio/mp3">
</audio>
<audio id="audio3">
<source src="track3.mp3" type="audio/mp3">
</audio>
<button onclick="playSequence()">Play All</button>
<script>
let currentIndex = 0;
const audioIds = ['audio1', 'audio2', 'audio3'];
function playSequence() {
currentIndex = 0;
playNext();
}
function playNext() {
if (currentIndex < audioIds.length) {
const audio = document.getElementById(audioIds[currentIndex]);
audio.onended = function() {
currentIndex++;
playNext();
};
audio.play();
console.log('Playing:', audioIds[currentIndex]);
} else {
console.log('Sequence complete');
}
}
</script>
</body>
</html>
Preventing Gaps and Clicks
To minimize audio gaps, preload all audio files and ensure smooth transitions:
<html>
<body>
<audio id="track1" preload="auto">
<source src="song1.mp3" type="audio/mp3">
</audio>
<audio id="track2" preload="auto">
<source src="song2.mp3" type="audio/mp3">
</audio>
<button onclick="startPlayback()">Start Seamless Playback</button>
<script>
function startPlayback() {
const audio1 = document.getElementById('track1');
const audio2 = document.getElementById('track2');
// Preload both tracks
audio1.load();
audio2.load();
// Set up seamless transition
audio1.onended = function() {
// Immediately start next track
audio2.currentTime = 0;
audio2.play();
};
// Start first track
audio1.currentTime = 0;
audio1.play();
console.log('Seamless playback started');
}
</script>
</body>
</html>
Key Points
- Use
preload="auto"to load audio files before playback - The
onendedevent triggers when audio finishes naturally - Reset
currentTime = 0for clean playback starts - Consider using Web Audio API for professional-grade seamless playback
Conclusion
Sequential audio playback is achieved using the onended event handler. Preloading audio files and proper timing ensure smooth, gap-free transitions between tracks.
Updated on: 2026-03-15T23:18:59+05:30
136 Views
Advertisements