"No Canvas" Example Does Not Work on Mobile

[dcyoung]

Thank you for creating this wonderful library. I found it yesterday and was up and running it in minutes!

While building a small 3D visualizer, I observed unexpected behavior on mobile (iOS). Debugging on mobile is a little difficult, but it appears like the the values in getBars()are all 0s when called from the onCanvasDraw callback.

I have verified this behavior using the provided No Canvas example codepen, modifying the generated html as a hacky method of debugging on mobile:

const audioMotion = new AudioMotionAnalyzer( null, {
  source: audioEl,
  mode: 2,
  useCanvas: false, // don't use the canvas
  onCanvasDraw: instance => {   
    let html = '';
    // shows all zeros on mobile
    for ( const bar of instance.getBars() ) {
      html += bar.value[0].toFixed(1) + ", "
    }
    container.innerHTML = html;
  }
});

For whatever reason, the Using Microphone Input example seems to work as expected on mobile, while the other examples are having issues when playing from other audio sources. Given that the mic stream seems to fine, this may indicate that the DSP is working as expected, but mobile is presenting some issues in streaming from other audio sources.

[hvianna]

Hello,

This is due to Safari not being able to generate analyzer data for remote audio streams - see https://audiomotion.dev/#/?id=visualization-of-live-streams-wont-work-on-safari

Thanks for your feedback, glad you like audioMotion-analyzer!

[dcyoung]

Thanks for the quick response @hvianna !

I’ve been using chrome on iOS when observing this behavior. Any idea if chrome suffers from the same limitations on mobile?

[hvianna]

Well, I should have said WebKit instead of Safari. Apple still requires that all iOS apps use WebKit (Safari's engine) to browse the web, including third-party browsers! So basically every browser for iOS will have the same limitations as Safari, regarding JavaScript.

I remember reading they intended to allow other engines in the future, but I don't think we're there yet.

Thanks again for pointing this out. I'll try to improve the documentation about this issue.

[dcyoung]

Gotcha. Thanks for the insights! Closing this issue as it does not appear to be a limitation of the analyzer library itself.