使用React在按键上播放声音

Question

我在React方面没有经验，所以如果这个问题看起来很傻，请原谅。当按下键盘上的某个键时，我一直在尝试播放声音。

我想使用以下解决方案：https://www.npmjs.com/package/react-sampler/v/1.0.2

问题是，当我尝试播放我的样本时，我会遇到一个错误：未捕获(承诺中(DOMException：由于找不到支持的源，无法加载。

import React from  'react';
import './App.css';
import Sampler from 'react-sampler';
var samples = [{
file: "samples/sample1.wav",
key: 'h', // First sample
startAt: 0.2 // delay in sec
},{
file: 'samples/sample2.wav',
key: 'o', // Second sample
startAt: 0.05
}];

var ReactSamplerExample = () => ({


handleSampleLaunch: function(sample){
var elm = document.querySelector('[data-key='+sample.key+']');
elm.classList.add('active');

setTimeout(() => { elm.classList.remove('active')}, 150);
},

render: function() {
return (

<div>
<ul className="keys">
<li data-key="h">
<span className="key"></span><span className="sample">Sample 1</span></li>
<li data-key="o">
<span className="key"></span><span className="sample">Sample 2</span></li>
</ul>

<Sampler samples={samples} onLaunchSample={this.handleSampleLaunch} disabled={false} />
</div>
);
}

});

我检查了文件的路径，它们似乎是可以的(所有文件都位于与samples文件夹相同的目录中(。

我不知道如何解决这个问题。如果有更好的工具或简单的音频API，任何人都可以推荐或应该切换到我很乐意接受一些建议。

提前感谢！

Answer 1

您使用的是react采样器。对于这种情况，我喜欢使用带有一些自定义功能的原生html组件。

这是我的样品给你，希望我能帮助你这个样品：

Codesandbox音频播放