I want to have a background music played on my site's homepage. Preferably without the controls. So that the music would start playing on its own (ie, without user's interaction). I tried different things, but all in vain so far. Tried to insert an audio HTML5 code into Joomla's Custom HTML module. Also tried an extension from K2 AllVideos. I heard that Firefox "doesn't like" mp3 format? So I also have the same audio file in .ogg (just in case). And another thing. I read online somewhere that browsers don't allow sites to play music without it being started by sites' visitors, ie without them pushing "PLAY" button first? Like there's some special JS code that helps to overcome that obsticle in a way that the code triggers the player to start playing music. I've got K2 component on my site, so these aren't the regular Joomla articles, but K2 "items". Don't know if that makes any difference in this regard... Also I'm aware that there's an option of inserting directly an audio HTML5 code into body of index.php file of current Joomla template. Though I'm not sure how to do that?
1 Answer
You can simply use a small Javascript snippet to autoplay some music.
Here is a basic example below and you'll notice audio.autoplay = true.
var source = 'https://sampleswap.org//samples-ghost/MELODIC%20LOOPS/GUITAR%20LOOPS/2302[kb]072_the-mystery-begins-guitar-space.wav.mp3';
var audio = new Audio();
audio.addEventListener('load', function() {
audio.play();
}, true);
audio.src = source;
audio.autoplay = true;
Here is a demo on JSFiddle: https://jsfiddle.net/64o8qt5z/
I don't believe this will work on mobile devices though. If I rightly remember, such devices require user interaction.
-
Well, I'd found some nice Joomla plugin, which I inserted into K2 item (article). And it's supposed to autoplay, but it doesn't. 'cos Firefox by default blocks autoplaying. So should I use the JS code to bypass that browser restriction? If yes, then how exactly?– papakotaCommented Jul 22, 2019 at 18:36
-
The code I've provided you works just fine in Firefox. You'll want to insert it into a custom module or use a plugin that allows you to insert custom JS– LodderCommented Jul 22, 2019 at 18:48
-
I normally use Joomla's Custom HTML module to insert JS code in a debug template position. For example, for a chat widget or Google Analytics. But that code always has "Script" tags before and after the JS code.– papakotaCommented Jul 22, 2019 at 19:13
-
I used my mp3 file's URL instead of yours in your code and added script tags. But it doesn't do the trick, unfortunately.– papakotaCommented Jul 22, 2019 at 19:19
-
@papakota This is the same as the code you'd normally insert in a custom module. Use the
<script>tags too. When you say it doesn't work, can you open your browser console and provide any errors you see please?– LodderCommented Jul 22, 2019 at 20:03