So I registered an rf.gd website, and put this in <body>. <audio src="https://dl.sndup.net/sgq3/Origins%20The%20Goths.mp3" autoplay loop></audio>
I am using Google Chrome, which does NOT block audio from autoplaying.
I entered the same code into two different online html editors, replit and the w3schools html editor, and both of them played the audio. But the audio never plays in my infinityfree website.
I have another question—This may seem trivial but how do I link to the site directory? Say I have “audio.mp3” inside of htdocs. How do I link it? “/htdocs/audio.mp3”? “htdocs/audio.mp3”? “audio.mp3”?
I think (more guess than knowledge), that “autoplay starts with interaction” feature is mostly intended for sites that, for example, use Javascript to dynamically add the audio element when a user clicks a page. Or maybe when they navigate from one page in your site to another.
The StackOverflow post you linked to contains numerous different hacks you could try. I don’t know which of those have been fixed or not.
I say “fixed” because being able to autoplay music when the page loads is generally not what people want. There isn’t a good way to make it work because nobody but you wants it to work.
To me, it also works, but it doesn’t autoplay (on Firefox). And the rules for video and audio are different.
sound not autoplay especially on chrome, it should be caused by autoplay policy.
when googling it, it say you can trick with iframe. iframe not work as easy to use on infinityfree.
If You make an audio custom, and You choose to using audio context. You may hitted by autoplay policy.
Here is the solutions, Your play button onClick event listener may look like this:
let audioCtx;
// load some sound
const audioElement = document.querySelector("audio");
let track;
const playButton = document.querySelector(".tape-controls-play");
// play pause audio
playButton.addEventListener(
"click",
() => {
if (!audioCtx) {
audioCtx = new AudioContext();
track = new MediaElementAudioSourceNode(audioCtx, {
mediaElement: audioElement,
}
// check if context is in suspended state (**autoplay policy**)
if (audioCtx.state === "suspended") {
audioCtx.resume();
}
if (playButton.dataset.playing === "false") {
//alert("play");
audioElement.play();
playButton.dataset.playing = "true";
// if track is playing pause it
} else if (playButton.dataset.playing === "true") {
audioElement.pause();
playButton.dataset.playing = "false";
}
// Toggle the state between play and not playing
let state =
playButton.getAttribute("aria-checked") === "true" ? true : false;
playButton.setAttribute("aria-checked", state ? "false" : "true");
},
false
);
before calling play method, there is an update of audio context suspended code
// check if context is in suspended state (**autoplay policy**)
if (audioCtx.state === "suspended") {
audioCtx.resume();
}