在 Reactjs 中使用 HTML5 音频标签

Question

我正在尝试在 React 中使用 HTML5 <audio> 标签，但它没有被渲染。

这是我第一次使用 React，所以我可能遗漏了一些明显的东西。

我正在使用现有的 Drupal 前端并在 React 中重新构建它。

我的所有其他 HTML 都在工作，但 HTML5 <audio> 标签不工作。

这是我用来说明问题的最简单的组件：

  const NoData = () => (
    <audio controls="" controlsList="nodownload">
      <source src="/sites/default/files/fruits/apples.mp3" type="audio/mpeg" />
    </audio>
  );

当我查看页面时，HTML 在那里，但没有呈现。

这个 HTML 是从我网站的另一部分逐字复制的，所以它应该可以工作。

React 应用程序嵌入在 Drupal 页面中，因此我将 <audio> 标记复制到 Drupal 页面本身，它在那里工作。它只是没有出现在 React 本身中。

正在读取<source>标签中的文件；如果我将文件更改为无效文件，我会在 Chrome 开发工具中收到警告。

那么如何在 React 中使用 HTML5 <audio> 标签呢？

Answer 1

像这样离开controls:

const App = () => (
  <div>
    <audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls />
    <audio controlsList="nodownload" controls>
     <source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg" />
    </audio>
  </div>
)
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

在 Reactjs 中使用 HTML5 音频标签

Using the HTML5 audio tag in Reactjs

reactjs

html5-audio