Tone.js不与工作做出反应

我想实现一个基本的纯音播放器从文件夹中加载文件，并通过在ReactJS按下按钮播放。Tone.js不与工作做出反应

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来使用唯一的Web音频 - 它始终是一样的错误。

我是新来的反应 - 请让我知道是否有这样做的正确道路。我需要使用componentDidMount吗？（我也尝试过使用它，请让我知道正确的方法）。感谢

来源

2017-06-12 AgneyaKerure

您的kick文件位于何处？ –

它与App.jsx文件位于同一文件夹中。这有什么区别吗？ – AgneyaKerure

如果是在同一个文件夹中，则路径应该是“./kick.wav”你试过。必须有其他错误...你有这个项目的github回购吗？我对解决这个问题感兴趣 –

它看起来像你使用流星，这是莫名其妙地阻止你的请求到服务器加载您的文件。最简单的方法是在你的根目录下创建一个public文件夹，将您的样品在那里。然后在./kick.wav传递给你的Tone.Player构造。构造函数在请求下发出GET请求，并自动找到您的文件。随着更改，我不得不添加此代码来播放缓冲区加载完成后的示例：

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

来源

2017-06-13 17:37:50

谢谢！你是最棒的！ – AgneyaKerure

拯救生命。我不使用流星，只是普通的React，仍然会遇到同样的问题。尽管将声音放入公用文件夹中。 –

Tone.js不与工作做出反应

回答

相关问题