javascript - 如何在 react 中使用 howler.js？

Question

为什么点播放有声音，点播放没有声音？？

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

class App extends Component {
  SoundPlay() {
    const Sounds = new Howl({
      src: ["sound.mp3"]
    })
    Sounds.play()
    console.log("sound")
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.SoundPlay}>play</button>
      </div>
    );
  }
}

export default App;

Answer 1

我最近发布了 react-use-audio-player这是 howlerjs 的 react Hook 抽象。你可以像这样使用它:

import { useAudioPlayer } from "react-use-audio-player"

function MyComponent() {
    const { play, pause, stop, playing } = useAudioPlayer()

    const handlePlayPause = () => {
        if (playing) {
            pause()
        } else {
            play()
        }
    }

    return (
        <div className="audioControls">
            <button onClick={handlePlayPause}>
                {playing ? "pause" : "play"}
            </button>
            <button onClick={stop}>stop</button>
        </div>
    )
}