How to Play Single Audio Element at a time in HTML ?
To play a single audio element at a time in HTML, use the ‘audio’ tag and JavaScript. Assign each audio element a unique ID. When playing a new audio, check if any audio is currently playing and pause it before starting the new one.
To play a single audio element at a time in HTML using JavaScript, you can create a function that controls the playback. First, assign each audio element a unique ID. Then, use the function to pause any currently playing audio before playing the new one. This approach ensures only one audio element plays at a time.
Approach
- Begin by creating a container with `h1` and `h3` headings. Then, add two audio elements with unique IDs and corresponding play buttons.
- Style the headings, buttons, and audio containers for better visual appeal and alignment. Use CSS to enhance the user interface.
- Write a function to control audio playback. This function should ensure that only one audio element plays at a time. Use JavaScript to manage the audio playback.
- Add onclick event listeners to the play buttons. These listeners should call the function with the corresponding audio ID when the buttons are clicked.
- Test the functionality by clicking the play buttons. Verify that only one audio plays at a time and that the audio playback behaves as expected.
Example: Implementation to play single audio element at a time using a javascript function.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Single Audio Playback at a Time</ title > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < style > h1, h3 { color: green; text-align: center; } .audio-container { margin: 20px 0; text-align: center; } button { padding: 10px 20px; font-size: 16px; background-color: crimson; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .playing { color: green; font-weight: bold; } </ style > </ head > < body > < div class = "container" > < h1 >w3wiki</ h1 > < h3 >Play Single Audio Element at a Time</ h3 > < div class = "audio-container" > < audio src = "https://media.w3wiki.net/wp-content/uploads/20240218213800/CantinaBand60.wav" id = "audio1" > </ audio > < button onclick = "playAudio('audio1')" > Play Cantina Band </ button > < span id = "playing1" ></ span > </ div > < div class = "audio-container" > < audio src = "https://media.w3wiki.net/wp-content/uploads/20240218213800/StarWars60.wav" id = "audio2" > </ audio > < button onclick = "playAudio('audio2')" >Play Star Wars</ button > < span id = "playing2" ></ span > </ div > </ div > < script > let currentAudio = null; function playAudio(audioId) { let audioElement = document.getElementById(audioId); let playingSpan = document.getElementById(`playing${audioId.slice(-1)}`); if (currentAudio && currentAudio !== audioElement) { currentAudio.pause(); playingSpan.innerHTML = ''; } if (audioElement.paused) { audioElement.play(); currentAudio = audioElement; playingSpan.innerHTML = 'Playing'; } else { audioElement.pause(); currentAudio = null; playingSpan.innerHTML = ''; } } </ script > </ body > </ html > |
Output: