I recently built a small speaker-cleaning tool and later integrated it into my WordPress site, but I’ve been struggling with a strange issue that I can’t fully debug. The widget plays different audio frequencies for water eject, dust removal, and deep cleaning modes, and everything looks fine visually, but on some mobile devices the audio either refuses to start, pauses unexpectedly, or requires multiple taps before playing. Sometimes the progress bar updates correctly while no sound is actually coming out. I suspect it may be related to autoplay policies, audio gesture restrictions, or how WordPress handles embedded scripts.
The tool uses plain HTML, CSS, and JavaScript with an <audio> element and dynamic mode switching. One thing I’m unsure about is whether repeatedly changing audio.src during interaction could be causing problems on mobile browsers after the WordPress migration. I’d really appreciate if any frontend or JavaScript developer could take a quick look and point out what I may be doing wrong.
<audio id="audioEl" preload="none" playsinline></audio>
<script>
function startPlay() {
audio.src = activeSrc;
var promise = audio.play();
if (promise !== undefined) {
promise.then(function() {
isPlaying = true;
}).catch(function(err) {
console.warn('Audio play failed:', err);
});
}
}
</script>
The full widget is basically a custom audio-frequency cleaner with animated progress bars and multiple playback modes, and I’m trying to keep it lightweight without using external libraries. If anyone has experience with mobile audio handling, WordPress script conflicts, or browser playback restrictions, I’d genuinely appreciate some guidance. Again, the live version is here for reference: http://fixmyspeakercleaner.net