0

Have spent way more hours tinkering on this solo than I should have and really appreciate your shooting the trouble and helping me learn!

I have a music related site that should autoplay background ambience on load with no controls (I know it’s annoying usually, but the JS I have makes the volume very low, and the sound is mostly pleasant brown-noise.)

The problem in all this is that, despite all this, playback only happens perfectly in Firefox. Safari desktop or IOS fails to play anything.

I have the following syntax in the Header/Footer:

<script>
  var audio = document.getElementById("bgnoise");
  audio.volume = 0.2;
</script>
<iframe src="https://dl.dropboxusercontent.com/s/fs2do1b5g17mqxs/silence.mp3?dl=0" 
allow="autoplay" id="audio" style="display:none">
</iframe>

<audio id="bgnoise"
autoplay 
preload="true" 
style="display:none"> 
enter code here

<source src="https://dl.dropboxusercontent.com/s/j021mggh8g2nh2b/lietoofine_-_03b_-_Get_Over_the_FOMO.ogg?dl=0" type="audio/ogg">
<source src="https://dl.dropboxusercontent.com/s/64i0456kmtsqbpv/lietoofine_-_03_-_Get_Over_the_FOMO.m4a?dl=0" type="audio/x-m4a">
<source src="https://dl.dropboxusercontent.com/s/pwdfzbrh435aaq9/lietoofine_-_03_-_Get_Over_the_FOMO.mp3?dl=0" type="audio/mp3”>

</audio>

——————————— ADDITIONAL INFO:

  • I haven’t tested on Android or Chrome. I did test on Chromium, and know that it’s even more of a stickler for HTML5 audio than IE is. I’m guessing mobile is fraught with even more HTML5 support problems.

    • The reason I have that iframe syntax is to fool Chromium browsers into playback with a 250millisec silence, per a highly-accepted post I found elsewhere on the net (although I’m not 100% convinced of its value).

    • All my other browsers DO play music served on the site from a
      soundcloud embedded plugin on my page, so they CAN play audio. And
      Safari USED to play the audio inconsistently in past simpler
      iterations of this code, and now it doesn’t play at all.

      • I suspect that there could also be another variable, which is the encoding of my files using LAME/FFMPEG in Audacity (vs iTunes
        Fraunhofer) that might have some metadata/settings Apple doesn’t
        like. But if that’s the case one would think at least 1 of the 3
        sources I put would succeed, no? The files are hosted on my Public
        dropbox folder (whose links I tested to work fine, since I created my Dropbox account before they denied Public folders to new users).

      • I used dl.dropboxusercontent.com (instead of www.dropbox.com) to access the raw file instead of redirect to Dropbox’s
        file-preview/comments page, and I appended ?dl=0 in the source
        Dropbox URL to only leave it to the browser to decide what to do with the file (?dl=1 forces the call to directly download the file to the user’s file system and not open it).

      • The filesizes of the various source option filetypes range from 2MB to 6MB.

      • I used type x-m4a instead of m4a as I read somewhere that’s wider supported. I doubt that file is actually AAC contained in M4A since it wasn’t encoded by iTunes. And I used filetype mp3 for the mp3 instead of the recommended ‘mpeg’ since I encoded it as MP3 not Mpeg.

      • I’m using a drag-and-drop sitebuilder [that supports HTML/CSS/JS but not installation of libraries/devfiles]. Again, the sound works fine in Firefox… but only Firefox!

Waiting for the day we have 1 sound format universally supported by all browsers, devices, and HTML standards/APIs. Until then really appreciate your help!

Coderpina
  • 1
  • 3
  • See https://stackoverflow.com/q/13266474/1531971 among others. –  Jan 15 '19 at 16:57
  • If you have multiple alternative file formats, you need one `source` tag for each format, not one `source`tag with multiple `src` attributes – NineBerry Jan 15 '19 at 17:34
  • Thanks. I’ve fixed my syntax in the snippet above as well as in my site, though it proved to make difference in practice. I just want to rule out code being the problem or being able to provide a solution, if the problem is with encoding of the files that Safari doesn’t like. N.B. please don’t forget to vote up my question if you found it well-researched and clearly written, much appreciated! – Coderpina Jan 16 '19 at 10:22

1 Answers1

0

I had been to so many places , including the old post you kindly shared @jdv . But it did lead me to a good workaround. In the end I found my answer as to why Firefox played the sound whereas Chrome and Safari didn’t. It’s not the HTML syntax, it’s not the encoding of the files, It can be found here: https://bitmovin.com/play-not-play-new-autoplay-policies-safari-11-chrome-64/

Coderpina
  • 1
  • 3