На audio.play () песня не запускается

Я хочу воспроизвести трек в своем веб-приложении 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.


reactjs javascript audio-player html5-audio
person Edwardcho Vaklinov    schedule 03.05.2019    source источник
comment
Вы проверяли, запускается событие или нет?   -  person Krishna Prashatt    schedule 03.05.2019
comment
Вы не можете play записывать звук сразу после его создания, поскольку он еще не готов / загружен в данный момент. Вместо этого вы должны прослушивать событие load.   -  person hindmost    schedule 03.05.2019
comment
@hindmost Можно. См. Пример stackoverflow.com/a/18628124/8237835. Я не думаю, что HTML5AudioElement даже использует событие load.   -  person Khauri    schedule 03.05.2019
comment
OP, вам следует добавить больше своего кода, чтобы мы могли проверить, что playTrack вызывается, а также проверить консоль / сеть, чтобы увидеть, действительно ли song.ogg был загружен. Попробуйте заменить URL-адрес на другой и смотрю, играет ли это.   -  person Khauri    schedule 03.05.2019
comment
Событие @Khauri McClain load запускается для всех внешних ресурсов, в т.ч. аудио.   -  person hindmost    schedule 03.05.2019
comment
@hindmost load не упоминается в MDN что заставляет меня думать, что если он запущен, это не имеет значения для HTMLAudio. Но если вы посмотрите на эту скрипку, то увидите, что на самом деле она никогда не запускается. Аудио не нужно загружать сразу, прежде чем его можно будет воспроизвести.   -  person Khauri    schedule 03.05.2019

Ответы (3)


arrow_upward
0
arrow_downward

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

<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>

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

person Get Rept    schedule 03.05.2019

arrow_upward
0
arrow_downward

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

Promise { "rejected" }
​
<state>: "rejected"
​
<reason>: DOMException: "The media resource indicated by the src attribute or assigned media provider object was not suitable."
​
<prototype>: PromiseProto
person Edwardcho Vaklinov    schedule 03.05.2019

arrow_upward
0
arrow_downward

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

  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 в ту же папку или в другое место, а затем импортировать их в компонент.

person Edwardcho Vaklinov    schedule 03.05.2019