时间戳

首页 > 解决方案 > 在 audio.play() 歌曲未触发

javascript - 在 audio.play() 歌曲未触发

问题描述

我想在我的 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，当我从我的文件夹中打开它时，它会在浏览器中打开。但遗憾的是它不能在我的网络应用程序中播放。

所以我的目标是在触发 onClick 时听到正在播放的歌曲。

标签： javascriptreactjshtml5-audioaudio-player

解决方案

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

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

推荐阅读