在audio.play（）上没有触发歌曲

Question

我想在我的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时听到正在播放的歌曲。

Answer 1

你可以试试这种方式

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

尝试适应，希望它有所帮助;）

Answer 2

登录浏览器控制台后，这是我发现的：

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

Answer 3

我这样做了 谢谢大家的帮助！ 解决方案是这样的：

1. 我导入了“ogg”格式的音频文件。 使用'ogg'，因为firefox不支持mp3。

import song from './song.ogg';

2.我在构造函数中将其设置为状态：

audio: new Audio(song)

3. 之后，这是我调用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格式文件放在同一文件夹中或您喜欢的位置，然后将它们导入到组件中。