如何在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钩子抽象。你可以这样使用它：

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>
    )
}

Answer 2

将您的代码更改为以下代码(在文件名前面使用/ )，并确保您的文件位于应用程序的public文件夹中。

const Sounds = new Howl({
    src: ["/sound.mp3"]
})

Answer 3

我最近也遇到了这个问题。在JavaScript中直接使用号叫器的问题是，您需要手动管理号叫器实例。当您的组件卸载时，您将需要停止任何播放声音。

React Howler的存在解决了这个问题：

import React, { useState } from 'react'
import ReactHowler from 'react-howler'

export default function PlayPause() {
  const { play, setPlay } = useState(false)
  return (
    <div>
      <ReactHowler src='./sound.mp3' playing={play} />
      <button onClick={() => setPlay(!play)}>
        { play ? 'Pause' : 'Play' }
      </button>
    </div>
  )
}

不过，我必须承认，React Howler并没有解决我的用例，因为它实际上并没有实现howler的所有功能，尤其是音频精灵。

我最终编写了我自己的库， .它将文件的加载与声音的播放分开，如下所示：

import React, { useState } from 'react'
import { Play, useHowl } from 'rehowl'

export default function PlayPause() {
  const { play, setPlay } = useState(false)
  const { howl } = useHowl({ src: './sound.mp3' })
  return (
    <div>
      <Play howl={howl} pause={!play} />
      <button onClick={() => setPlay(!play)}>
        { play ? 'Pause' : 'Play' }
      </button>
    </div>
  )
}

在另一个答案中链接的useAudioPlayer库似乎是react-howler的另一个可靠的替代方案。

在任何情况下，我都会说直接在React项目中使用Howler会导致令人头疼的问题，因为在处理组件生命周期的同时管理播放声音是很困难的。