时间戳

首页 > 解决方案 > 在 Reactjs 中使用 HTML5 音频标签

reactjs - 在 Reactjs 中使用 HTML5 音频标签

问题描述

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

这是我第一次使用 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 开发工具中收到警告。

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

标签： reactjshtml5-audio

解决方案

就这样离开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>

推荐阅读