gpt4 book ai didi

javascript - Tone.js 无法与 React 一起使用

转载 作者:行者123 更新时间:2023-12-01 03:31:38 35 4
gpt4 key购买 nike

我想实现一个基本的音调播放器来从文件夹加载文件并通过按 ReactJS 中的按钮来播放它。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Tone from 'tone';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Slider from 'material-ui/Slider';
import RaisedButton from 'material-ui/RaisedButton';


let sound = new Tone.Player("kick.wav").toMaster();
export default class App extends Component {

render() {

return(
<MuiThemeProvider>
<div>
<Slider min={0} max={100} step={10} className = "Slider1Test1" style={{height: 400}} axis="y"/>
<RaisedButton label="A" className = "RaisedB1Test1" style={{width: 10}}/>

<Slider min={0} max={100} step={10} className = "Slider2Test1" style={{height: 400}} axis="y"/>
<RaisedButton label="B" className = "RaisedB2Test1" style={{width: 10}}/>
</div>
</MuiThemeProvider>
);
}
}

但这会产生错误:

Uncaught (in promise) DOMException: Unable to decode audio data modules.js?hash=625032f…:48100 Uncaught (in promise) Tone.Buffer: could not decode audio data: kick.wav

我尝试过“./kick.wav”、“./kick.ogg”、“./kick.mp3”。我尝试过给出完整的路径。我尝试通过提供 XMLHTTPRequest 来仅使用网络音频 - 它始终是相同的错误。

我是新来的 react - 请告诉我是否有正确的方法来做到这一点。我需要使用 componentDidMount 吗? (我也尝试过使用它。请让我知道正确的方法)。谢谢

最佳答案

看起来您正在使用meteor,这在某种程度上阻止了您对服务器加载文件的请求。最简单的解决方案是在根目录中创建一个 public 文件夹并将示例放入其中。然后将 ./kick.wav 传递给您的 Tone.Player 构造函数。构造函数在后台发出 GET 请求,并会自动找到您的文件。除了这些更改之外,我还必须添加此代码以在缓冲区完成加载后播放示例:

const x = new Tone.Player('./kick.wav').toMaster()
Tone.Buffer.on('load', () => {
x.start();
})

关于javascript - Tone.js 无法与 React 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44507623/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com