React howler - 无法加载核心功能

Question

我正在使用 React-Howler 在我的 React 应用程序中播放声音。在我的组件顶部，我有以下导入：

import ReactHowler from 'react-howler';
import React, {Component} from 'react';

class SamplesInnerLrg extends Component { 

playSampleAction(sampleSource) {

    var sound = new Howl({
      src: [sampleSource]
    })

}
render() {
    <div>
        <div onClick={this.playSampleAction("url to some source")}>Play</div>
        <ReactHowler src={"url to some source"} playing={true} />
    </div>

}

当我渲染组件时，它会播放组件的声音，但是当我单击 div 说 "play" 时，它告诉我未定义 Howl。我试过用两种方式定义 Howl：

var Howl = require('howler').Howl;

或

import { Howl } from 'react-howler'

但都不起作用。不确定我在导入 Howl 时做错了什么！

Answer 1

确保您在浏览器中包含 Howler 脚本：

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

React howler - 无法加载核心功能

React howler - unable to load core function

howler.js

reactjs