How to add Background Music to WordPress Website (works on phone)

How to add background music to WordPress website

Adding background music to your WordPress website can be an excellent way to enhance the atmosphere and user experience for your visitors but be careful, sometimes it can annoy users. ❗️

Whether you have a blog, portfolio, or online store, properly implemented background music can leave a strong impression on your audience. In this detailed tutorial, I’ll show you how to easily add music to your WordPress site, step by step, while ensuring everything works flawlessly on mobile devices.

However, it’s important to be cautious when adding music, as it can sometimes annoy or distract users if not done thoughtfully. It’s also crucial to consider the volume and type of music you choose. Opt for subtle, non-intrusive tracks that complement your content rather than overpower it. Always test your website after adding music to ensure it doesn’t negatively impact loading speed or user experience.

One of the biggest challenges when adding background music is ensuring it works on mobile devices. In this tutorial, I’ll show you how to make the music play smoothly on smartphones and tablets, regardless of the operating system.

In just 6 minutes, you’ll learn everything you need to know about adding music to your WordPress site, along with practical tips and tricks to make the process easier. Whether you’re a beginner or an experienced WordPress user, this tutorial is designed for everyone.

Watch the video until the end to master this useful skill and add an extra dimension to your website. If you enjoy this video, don’t forget to like, comment, and subscribe to my channel for more helpful WordPress and web design tips and tutorials! 😁

Video Tutorial of How to add BACKGROUND MUSIC to WordPress website – (works on phone) 2020.

🔗 Code:

<iframe style="display: none;" src="HERE put URL of silence mp3"></iframe>

<audio id="myaudio" autoplay="autoplay" loop="loop" controls="controls">
<source src="HERE put URL of your background music" type="audio/mp3" />
</audio>

<script>
  var audio = document.getElementById("myaudio");
  audio.volume = 0.2;
</script>

🔗 250 milisecond of silence: https://github.com/anars/blank-audio

🔗 Google autoplay policy: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes