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

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

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

Answer 2

我最近发布了react-use-audio-player，它是howlerjs的react hooks抽象。您可以像这样使用它：

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 3

我最近也遇到了这个问题。直接在JavaScript中使用Howler的问题是您需要手动管理Howl实例。卸下组件时，您需要停止所有播放声音。

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的功能，尤其是音频精灵。

我最终编写了自己的音乐库Rehowl。它将文件的加载与播放声音分开：

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会引起头痛，因为在处理组件生命周期的同时很难管理播放声音。

Answer 4

声音文件需要导入到组件中，就像React和Howler一样。

import React, { Component } from "react";
import { Howl, Howler } from 'howler';
import newSound from './sound.mp3';

class App extends Component {
  constructor() {
    super()
    this.state = { 
      sound: new Howl({
          src: [newSound]
      })
    }
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.state.sound.play()}>play</button>
      </div>
    );
  }
}

export default App;

如果您构建了一个构造函数，您也许可以将声音存储在状态中，这样您就不会在每次单击播放时实例化一个新的 Howl。像这样的东西。

import React, { Component } from "react";
import { Howl, Howler } from 'howler';
import newSound from './sound.mp3';

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

export default App;

这可能会引发错误，因为 Chrome 的 AudioContext 规则。但我很想看看它是否有效！

如何在反应中使用howler.js？

4 个答案: