Howler 不会加载和播放声音文件答案

【问题标题】：Howler won't load and play sound filesHowler 不会加载和播放声音文件
【发布时间】：2020-11-30 13:09:28
【问题描述】：

我正在做一个小型 reactTS 项目，我想用 Howler 播放一些声音。尝试加载文件时（我尝试过 .mp3 和 .webm），它们不会加载。（是的，我的资产文件夹，音频文件所在的文件夹位于公共文件夹中）

这里是创建声音的函数，它接受文件的路径，并通过映射函数调用。

SoundPlay = (mp3:string, webm:string) => {
  let sound = new Howl({
    src: [webm,mp3]
  });
  sound.play();
}

【问题讨论】：

你是如何实现SoundPlay 函数的？告诉我们你做了什么
对不起，我有点初学者。我无法将我的代码格式化为评论，所以我将其发布在下面作为解决方案。

标签： reactjs howler.js

【解决方案1】：

import React, {Component} from 'react';
import { Howl, Howler } from 'howler';

const audioClips = [
  {mp3: '../../../public/assets/Cat.mp3', webm: '../../../public/assets/Cat.webm', label: "Cat"},
  {mp3: '../../../public/assets/Dog.mp3', webm: '../../../public/assets/Dog.webm', label: "Dog"}
]


class SoundButtons extends Component {

  SoundPlay = (mp3:string, webm:string) => {
    let sound = new Howl({
      src: [webm,mp3]
    });
    sound.play();
  }

  RenderButtonAndSound = () => {
    return audioClips.map((soundObj, index) => {
      console.log(soundObj);
      return (
        <button key={index} onClick={() => {this.SoundPlay(soundObj.mp3, soundObj.webm)}}>
          {soundObj.label}
        </button>
      )
    })
  }

  render() {
    Howler.volume(1.0);
    return(
    <div>
      {this.RenderButtonAndSound()}
    </div>
    )}
}

export default SoundButtons;

【讨论】：

【解决方案2】：

您可以尝试使用/public/assets/Cat.mp3 来引用该文件夹。原因是，我猜你正在使用 create-react-app 来创建这个 React 应用程序。捆绑后，应用程序将位于公共文件夹中。阅读此other question，其中提到了相同的问题。

【讨论】：