html5 звук не работает на мобильном телефоне (используйте React js) - PullRequest
Новая
       98

html5 звук не работает на мобильном телефоне (используйте React js)

0 голосов
/ 14 июля 2020

Трей для записи аудио mp3 песни в React js. Хорошо работает на рабочем столе. По мобильному телефону не работает. При использовании stati c url в качестве источника он работает на мобильных устройствах. При использовании https-адреса это не работает. Вот код: 

const [audio, setAudio] = useState(() => {
   let path = props.name + ".mp3";
   let url = "https://cdn.sitename.com/audio/128/" + path;
   return url;
 });

 <audio
      preload="none"
      className="Audio-player"
      ref={audioEl}
      controls
      loop={repeat}
      onPlay={handleStart}
      onEnded={handleEnded}
    >
    <source src={audio} type="audio/mpeg" />
    Your browser does not support the audio tag.
 </audio>

Этот код работает: 

const [test, setTest] = useState("https://cdn.sitename.com/audio/128/3.mp3");     
<audio controls ><source src={test} type="audio/mpeg" /> </audio>

Почему не работает, когда используется функция обратного вызова в состоянии. Кроме того, я проигрываю звук при нажатии кнопки. Также не работает на мобильных устройствах. 

const startPlay = () => {
audioEl.current.pause();
audioEl.current.load();
let apiData = "https://cdn.sitename.com/audio/data/";
let start = 1;
fetch(apiData)
  .then((res) => res.json())
  .then(
    (result) => {
      let resOb = result.data.audio;
      resOb.map((item, index) => {
          start = item.number;
          let url = "https://cdn.sitename.com/audio/128/" + start + ".mp3";
          setAudio(url);
          audioEl.current.play();
        
      });
    },
    (error) => {
      console.log(error);
    }
  );

};

...