How to Add Background Music to a Blog: Creating an Emotional Auto-Play Player with Vocaroo and HTML Code
This guide introduces how to insert an automatically playing Background Music (BGM) player into a blog using the free audio hosting service Vocaroo. It provides detailed methods for implementing the auto-play function when scrolling using HTML and JavaScript code.
When writing a blog post, sometimes a single song can convey deeper emotion than a single sentence. Especially when writing emotional essays, diaries, quotes, or travel reviews, background music can significantly amplify the emotional depth of the text. In this article, we will introduce how to insert an auto-playing background music player into your blog using the free audio hosting site Vocaroo.
Inserting an Auto-Play Background Music Player into Your Blog with Vocaroo
Vocaroo is a free audio service that allows voice recording and sharing using only a web browser. It can be used immediately without any separate installation, and the finalized audio is provided as a share link or an MP3 download, making it suitable for embedding in blogs, emails, and messages.
Key Features of Vocaroo and Advantages for Blog Use
- Allows recording and MP3 upload without registration
- Provides share links that allow MP3 download and direct embedding
- Suitable for personal audio or short content without copyright issues (Not recommended for long-term storage)
- Minimizes blog performance degradation due to fast and lightweight loading speed
How to Insert the Auto-Play Background Music Code into Your Blog
By inserting the code below into the HTML edit mode of your blog post at the desired location, the music will automatically start playing when the visitor scrolls down or when the player enters the viewport. The volume is fixed at 20% to fill the atmosphere of the blog without causing excessive noise to the visitor.
1. Auto-Play on Scroll (Using Intersection Observer)
This code ensures the audio player starts playing only when a certain portion (threshold: 0.3) appears on the screen, preventing unauthorized music playback without user interaction. The initial state is also set to muted.
div id="audio-container" style="padding: 20px; background: #f0f0f0; border-radius: 10px;"
audio id="auto-player" muted controls style="width: 100%"
source src="https://media.vocaroo.com/mp3/1dsVCLXZkNsm" type="audio/mpeg"
Your browser does not support the audio element.
/audio
/div
script
document.addEventListener('DOMContentLoaded', () = {
const audio = document.getElementById('auto-player');
let hasUnmuted = false;
// Initial state: Muted, volume set to 20%
audio.muted = true;
audio.volume = 0.2;
const observer = new IntersectionObserver((entries) = {
entries.forEach(entry = {
if (entry.isIntersecting) {
if (!hasUnmuted) {
audio.muted = false; // Unmute upon entering viewport
hasUnmuted = true;
}
audio.play().catch(() = {});
}
});
}, { threshold: 0.3 }); // Activates when 30% is visible
observer.observe(document.getElementById('audio-container'));
// Fallback for when Intersection Observer might not work: attempt unmute and play on first scroll event
const onScroll = () = {
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
audio.play().catch(() = {});
}
window.removeEventListener('scroll', onScroll);
};
window.addEventListener('scroll', onScroll);
});
/script2. Scroll + Stop Playback 20 Seconds After Exiting Viewport
This code adds a feature that automatically pauses playback after a 20-second grace period when the player completely leaves the screen, preventing the music from continuing indefinitely and showing more consideration for user experience.
div id="audio-container" style="padding: 20px; background: #f0f0f0; border-radius: 10px;"
audio id="auto-player" muted controls style="width: 100%"
source src="https://media.vocaroo.com/mp3/1dsVCLXZkNsm" type="audio/mpeg"
Your browser does not support the audio element.
/audio
/div
script
document.addEventListener('DOMContentLoaded', () = {
const audio = document.getElementById('auto-player');
let hasUnmuted = false;
let stopTimeout = null;
audio.muted = true;
audio.volume = 0.2;
const observer = new IntersectionObserver((entries) = {
entries.forEach(entry = {
if (entry.isIntersecting) {
// Start playback upon entering view
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
}
audio.play().catch(() = {});
// If a stop timer was set upon exiting, clear it
if (stopTimeout) {
clearTimeout(stopTimeout);
stopTimeout = null;
}
} else {
// Set a stop timer for 20 seconds after exiting view
stopTimeout = setTimeout(() = {
audio.pause();
}, 20000); // Stop after 20 seconds
}
});
}, { threshold: 0.3 });
observer.observe(document.getElementById('audio-container'));
// Play on first scroll (mobile environment support)
const onScroll = () = {
if (!hasUnmuted) {
audio.muted = false;
hasUnmuted = true;
audio.play().catch(() = {});
}
window.removeEventListener('scroll', onScroll);
};
window.addEventListener('scroll', onScroll);
});
/scriptBlog Content that Goes Well with Background Music
- Travel essays and photo-centric travel reviews
- Posts focused on emotional photos and personal creations
- Healing quotes collections and monologue-style writings
- Topics requiring a specific emotional mood, such as caf recommendations or introductions to city vibes
A blog with background music creates a quiet, resonating atmosphere. The sound fills the gaps in the text and encourages the reader to stay on the page longer. Music is a tool that breathes life into blog writing. If a single line of code can allow gentle music to flow through your blog, it can itself become a form of digital mood setting Use Vocaroo and an auto-play audio player to add a touch of emotion to your blog.
Frequently Asked Questions (FAQ) - Blog Background Music Auto-Play
Q1: Will this code work if I use a different free audio hosting service instead of Vocaroo?
Yes, it will work. The important factor is that the direct link (URL) of the music file inserted into the source src="..." part must be an audio file format like MP3. If SoundCloud or another hosting service provides a direct MP3 link, you can use that link instead of the Vocaroo link.
Q2: What is the reason and necessity for setting the initial state to muted when auto-playing background music?
Most modern web browsers (Chrome, Safari, etc.) generally block or mute media from auto-playing without user interaction to protect the user experience. Therefore, starting the code with muted=true bypasses the browser's autoplay policy, and using JavaScript to unmute and play after the user's scroll interaction is currently the most stable way to implement auto-play.
Q3: How can I change the background music volume to a value other than 20%?
You can modify the audio.volume = 0.2; part in the provided JavaScript code to your desired value. The volume is specified as a decimal value between 0.0 (minimum) and 1.0 (maximum). For example, if you want to set the volume to 50%, you would change it to audio.volume = 0.5;.