0

我有这个名为“app.js”的反应文件，代码如下：

import React from 'react';


const App = () => {
   
   const play = (url) => {
       new Audio(url).play();
   }

   return <>
       <input type="button" value="play" onClick={()=> play("./au.mp3")} />
       <audio src="./au.mp3" id="audio"></audio>
   </>;
}

export default App;

一切都设置正确，如果按钮确实呈现。但是，当我按下它时，音频（与其他文件位于同一“src”目录中）不会播放。

这是错误：

Uncaught Error: The error you provided does not contain a stack trace.
   at S (index.js:1)
   at V (index.js:1)
   at index.js:1
   at index.js:1
   at a (index.js:1)
localhost/:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

关于为什么这可能不起作用的任何想法？

4

1 回答 1

1

所以，你的例子实际上对我有用，所以你的音频文件可能有问题？请参阅此处，除了音频 url 之外，我没有更改您的代码中的任何内容（我正在使用来自 Mozilla 的音频对象的 MDN 条目中的公开可用文件）

如果你想在 React Component 中控制音频，你需要使用一个叫做“ ref ”的东西（供参考）。

Refs 提供了一种访问在 render 方法中创建的 DOM 节点或 React 元素的方法。

您当前正在做的是在您的方法中创建一个新的、不同的音频对象play。

因此，您可以通过使用React中的ref属性和实用程序来获取 DOM 元素的句柄，并像这样控制您的音频：useRef

const App = () => {
  const audioRef = useRef(null);
  const play = (url) => {
    audioRef.current.play();
  };

  return (
    <>
      <input type="button" value="play" onClick={() => play()} />
      <audio
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
        ref={audioRef}
      ></audio>
    </>
  );
};

请参阅此处工作的第二个示例

于 2020-10-20T17:23:14.783 回答