На audio.play () песня не срабатывает - PullRequest
Новая
       36

На audio.play () песня не срабатывает

0 голосов
/ 03 мая 2019

Я хочу воспроизвести трек в своем веб-приложении React.Я просматриваю видео и пробую все, что там делается, но когда я нажимаю кнопку, чтобы вызвать функцию, которая должна вызывать audio.play (), трек не воспроизводится.

Ниже приведен код, который у меня есть.

Это кнопка с небольшим количеством символов scss: 

<div className="audio-player">
    <button className="play"><i className="ion-play" onClick={this.playTrack}></i></button>
    <div className="seek-bar">
        <div className="fill"></div>
        <div className="handle"></div>
    </div>
</div>

Как видите, onClick {} долженвызовите эту функцию: 

playTrack = () => {
    let audio = new Audio('song.ogg');
    audio.play();
}

Но она не играет.Теперь я предполагаю, что песню, которую я предоставляю, нельзя найти или связать.Я пробовал формат mp3 и формат ogg. Я храню трек в папке, где находится папка src.Я преобразовал формат mp3 в ogg, и когда я открываю его из папки, он открывается в браузере.Но, к сожалению, это не может быть воспроизведено в моем веб-приложении.

Так что моя цель - услышать песню, воспроизводимую при запуске onClick.

Ответы [ 3 ]

0 голосов
/ 03 мая 2019

После входа в консоль браузера вот что я узнал: 

Promise { "rejected" }
​
<state>: "rejected"
​
<reason>: DOMException: "The media resource indicated by the src attribute or assigned media provider object was not suitable."
​
<prototype>: PromiseProto
0 голосов
/ 03 мая 2019

Я сделал это. Спасибо всем за помощь! Решение таково:

  1. Я импортировал аудиофайл в формате "ogg". Используйте 'ogg', так как Firefox не поддерживает mp3. 
import song from './song.ogg';

2. Я установил его в состояние в конструкторе: 

audio: new Audio(song)
  1. После этого это функция, которую я вызываю onClick. Не уверен, если мне нужно указать формат, но импорт был важен: 
playTrack = () => {

        const {audio} = this.state;
        audio.type = 'audio/ogg';



        var playPromise = audio.play();
        console.log(playPromise);
        playPromise.data = audio;

        if(playPromise !== undefined){
        playPromise.then(function() {
            console.log("Playing");
        }).catch(function (error) {
            console.log(error);
        });
      }
    }

Таким образом, вам нужно использовать преобразованный формат mp3 в ogg, а затем поместить файлы аудио формата ogg в ту же папку или куда угодно, а затем импортировать их в компонент.

0 голосов
/ 03 мая 2019

Вы можете попробовать этот способ 

<input type="button" value="PLAY"  onclick="play()">
<audio id="audio" src="song.ogg" ></audio>

  <script>
  function play(){
       var audio = document.getElementById("audio");
       audio.play();
  }
  </script>

попробуй адаптироваться, надеюсь, это поможет;)

...