reactjs - 使用 React 在按键上播放声音

问题描述

我对 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>
      );
    }
  
  });

我检查了文件的路径，它们似乎没问题（所有文件都位于与示例文件夹相同的目录中）。

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

提前致谢！

标签： reactjsaudiokeyboard

reactjs - 使用 React 在按键上播放声音

问题描述

解决方案

推荐阅读