Question

我想在我的React Web应用程序中播放曲目。我跟随视频并尝试在此完成的所有操作，但是当我单击按钮以调用应触发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，当我从文件夹中打开它时，它会在浏览器中打开。但是可悲的是，它无法在我的Web应用程序中播放。

所以我的目标是在触发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

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

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

import song from './song.ogg';

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

audio: new Audio(song)

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

在audio.play（）上未触发歌曲

3 个答案: