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 keep audio playing while navigating through pages?
To keep audio playing while navigating through pages, you need to prevent full page reloads that would interrupt playback. Here are the main approaches:
Method 1: Using AJAX with History API
Load new content dynamically without refreshing the page using AJAX combined with the History API's pushState() method.
<!DOCTYPE html>
<html>
<head>
<title>Continuous Audio Example</title>
</head>
<body>
<audio id="backgroundAudio" controls autoplay loop>
<source src="/audio/background-music.mp3" type="audio/mpeg">
</audio>
<nav>
<a href="/page1" class="ajax-link">Page 1</a>
<a href="/page2" class="ajax-link">Page 2</a>
<a href="/page3" class="ajax-link">Page 3</a>
</nav>
<div id="content">
<h1>Welcome to Home Page</h1>
<p>This is the initial content.</p>
</div>
<script>
// Handle AJAX navigation
document.addEventListener('click', function(e) {
if (e.target.classList.contains('ajax-link')) {
e.preventDefault();
const url = e.target.href;
// Load content via AJAX
fetch(url)
.then(response => response.text())
.then(html => {
// Extract content from response
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newContent = doc.querySelector('#content').innerHTML;
// Update page content
document.querySelector('#content').innerHTML = newContent;
// Update browser history and URL
history.pushState({url: url}, '', url);
})
.catch(error => console.error('Error loading page:', error));
}
});
// Handle browser back/forward buttons
window.addEventListener('popstate', function(e) {
if (e.state && e.state.url) {
// Reload content for the new URL
location.reload(); // Simplified for demo
}
});
</script>
</body>
</html>
pushState() Parameters
The history.pushState() method accepts three parameters:
- State object: Data associated with the new history entry (can be null)
- Title: Page title (often ignored by browsers, pass empty string)
- URL: The new URL to display in the address bar
Method 2: Single Page Application (SPA)
Build your site as a Single Page Application where all content loads dynamically:
<!DOCTYPE html>
<html>
<head>
<title>SPA Audio Example</title>
</head>
<body>
<audio id="player" controls autoplay>
<source src="/audio/continuous-track.mp3" type="audio/mpeg">
</audio>
<nav>
<button onclick="loadPage('home')">Home</button>
<button onclick="loadPage('about')">About</button>
<button onclick="loadPage('contact')">Contact</button>
</nav>
<main id="app"></main>
<script>
const pages = {
home: '<h1>Home</h1><p>Welcome to our site!</p>',
about: '<h1>About</h1><p>Learn more about us.</p>',
contact: '<h1>Contact</h1><p>Get in touch with us.</p>'
};
function loadPage(page) {
// Update content without page reload
document.getElementById('app').innerHTML = pages[page];
// Update URL
history.pushState({page: page}, page, `/${page}`);
}
// Load initial page
loadPage('home');
</script>
</body>
</html>
Key Considerations
- Browser Compatibility: Use libraries like History.js for consistent behavior across older browsers
- SEO: Ensure your AJAX content is crawlable by search engines
- Accessibility: Update page titles and announce content changes to screen readers
- Fallback: Provide traditional navigation for users with JavaScript disabled
Conclusion
To maintain continuous audio playback, avoid full page reloads by using AJAX navigation with the History API. This creates a seamless user experience where audio never interrupts during site navigation.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements