Howler won't load and play sound files

Question

I'm working on a small reactTS project where I want to play some sounds with Howler. When trying to load the files (I've tried woth both .mp3 and .webm), they will not load. (Yes, my assets folder, where the audio files recide is in the public folder)

Here is the function for creating a sound, which takes in the path for the files, and is called with a map function.

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

How did you implement that `SoundPlay` function? Show us what you did — kunquan, Nov 30 '20 at 13:19
Sorry, I'm a bit of a beginner. I couldn't format my code as a comment, so I posted it below as a solution. — Glaum, Dec 01 '20 at 11:24

score 1 · Answer 1 · answered Dec 01 '20 at 11:20

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;

score 1 · Answer 2 · answered Dec 01 '20 at 11:47

You may try using /public/assets/Cat.mp3 to refer to the folder. The reason is that, I guess, you are using create-react-app to create this React app. When being bundled the app will be located in the public folder. Read this other question where it mentions the same issue.

Howler won't load and play sound files

2 Answers2

Linked