HTML5 Audio Not Working on Mobile Browsers

Question

An Edit before anyone reads this: This isn't auto play audio. We're awaiting use interaction and it works perfectly on every tested browser on windows/Mac

I have a website that currently uses React and Django to serve all types of media - Video, Images, and Audio.

I know its not as efficient as it should be with regards to delivery and I haven't implemented any streams, however, lets ignore that and get to the issue: My audio, with custom controls, doesn't play when on iOS. I haven't tested on any android devices but it works perfectly on Chrome, Firefox, Safari on MacOS.

I know there's been some older topics and questions with iOS and the way certain media plays but they don't seem directly applicable or truly helpful with this particular situation.

Heres the code for my audio component, I have a feeling its to do with the custom controls more than anything so I'll include that as well but as far as the HTML goes, I haven't found a logical issue yet. All of the following questionable variables here work with my other media components so I'm not sure the syntax is the issue exactly.

import React, { useState, useEffect, useRef } from 'react'
import AudioSpectrum from 'react-audio-spectrum';


export default function AudioBit({id, Media, Company, Cover}) {

  const [playing, setPlaying] = useState(false)
  const [mute, setMute] = useState(false)
  const audioRef = useRef(null);

  const handlePlayAudio = () => {
      if(playing){
        audioRef.current.pause();
          setPlaying(false)
      } else {
        audioRef.current.play();
          setPlaying(true)
      }
  }

  const handleMuteAudio = () => {
      if(mute){
        audioRef.current.muted = false;
          setMute(false)
      } else {
        audioRef.current.muted = true;
          setMute(true)
      }
          setMute(!mute)
  }
    return (
    <div className="AudioBit">

      <div className="audioWrap">
        <audio 
          ref={audioRef} 
          id={`AudioElement${id}`} 
          src={`.${Media}`}
          type="audio/mpeg"
          preload="auto"
        >
        </audio>
      </div>
     
      <div className="canvasWrap">
  

        <div className="LogoWrap">
          <img alt={Company.Title} src={`.${Company.Logo}`}/>
        </div>
        <AudioSpectrum className="visualizer"
          id={`AudioCanvas${id}`}
          audioId={`AudioElement${id}`}
          capColor={'red'}
          capHeight={2}
          meterWidth={12}
          meterCount={28}
          meterColor={[
            {stop: 0, color: '#f00'},
            {stop: 0.5, color: '#0CD7FD'},
            {stop: 1, color: 'red'}
          ]}
          gap={4}
          />

        
      </div>
   
      
      <div className="AButtonWrap">
            <button style={{
              backgroundImage: `url(.${Cover})`,
              backgroundPosition: 'center',
              backgroundSize: 'contain',
              backgroundRepeat: 'no-repeat'
              }} 
              className={`AudioPlayButton ${playing ? 'hide' : ''}`} 
              onClick={handlePlayAudio}> 
                <i className="PlayButton bi bi-play-fill"></i>
            </button>
            <button className="AudioMuteButton" onClick={handleMuteAudio} >
              {
                mute ? <i className="MuteButton bi bi-volume-mute-fill"></i> 
                : <i className="MuteButton bi bi-volume-up-fill"></i> 
              }
              </button>
        </div>
    </div>
  )

};
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Might be an issue with the 'AudioSpectrum' component but it loads directly in the iOS/Mobile browsers so it doesn't feel like it is.

Answer 1

An update: Sometimes, even if it feels like it isn't something, its good to check because drum roll please... it WAS the 'AudioSpectrum' component. Thanks to everyone that didn't help with this one!