title: HTMLAudioElement Error, DOMException: The element has no supported sources
body: <p>Sorry if the formatting is pretty bad, I am getting the error shown above. I have tried a bunch of fixes but nothing seems to work. It should only update the audio if changeAudio changes values. The src for the window object url seems to work, and I got the HTMlAudioElement working with a simpler solution that just played audio if a button was pressed.</p>
  
  <p>Any help would be appreciated.    </p>
  
  <pre><code>import React, {useState, useEffect} from 'react'
  import Axios from 'axios'
  import {url} from '../App'
  const pause = 'https://image.flaticon.com/icons/svg/61/61180.svg'
  const play = 'https://image.flaticon.com/icons/svg/109/109197.svg'
  var audio_url = ''
  var audio;
  
  const AudioPlayer = ({pk, changeAudio=true, timeChange}) =&gt; {
      var [playing, setPlay] = useState(true)
      var [imgSrc, setImgSrc] = useState('https://image.flaticon.com/icons/svg/61/61180.svg')
  useEffect(async () =&gt; {
      const res =  await Axios.get(url + 'audioupload/' + pk, {
          responseType: 'blob'
      })
      const mp3 = new Blob([res.data], { type: 'audio/mp3' })
      const audio_url = window.URL.createObjectURL(mp3)
      audio = new Audio(audio_url)
      audio.load()
  
  }, [changeAudio])
  const changeTime = (timeChange) =&gt; {
      audio.currentTime = audio.currentTime + timeChange
  }
  
  const pausePlay = async () =&gt; {
      if(playing){
          setImgSrc(pause)
          setPlay(false)
          audio.pause()
      }else{
          setImgSrc(play)
          setPlay(true)
          try{
              await audio.play()
          }catch(e){
              console.log('audio error:', e)
          }
      }
  }
  if (audio_url !== ''){
      if(changeTime !== undefined){
          changeTime(timeChange)
      }
  }
  
  return (
      &lt;div&gt;
          &lt;img src={imgSrc} onClick={pausePlay}/&gt;
      &lt;/div&gt;
  );
  }
  
  
  
  
  export default AudioPlayer;
  </code></pre>