react 浏览器播放音频文件
时间: 2023-11-15 16:10:25 浏览: 190
要在 React 中播放音频文件,您可以使用 `HTML5 audio` 标签和 `Audio` 对象来实现。
1. 在 React 组件中,使用 `import` 引入音频文件:
```javascript
import audioFile from './audio.mp3';
```
2. 在 `render` 方法中,添加 `audio` 标签并设置 `src` 属性为导入的音频文件路径:
```javascript
render() {
return (
<div>
<audio src={audioFile} controls />
</div>
);
}
```
3. 可以通过 `Audio` 对象来控制音频的播放、暂停等功能,例如:
```javascript
const audio = new Audio(audioFile);
audio.play();
```
完整代码示例:
```javascript
import React, { Component } from 'react';
import audioFile from './audio.mp3';
class AudioPlayer extends Component {
componentDidMount() {
const audio = new Audio(audioFile);
audio.play();
}
render() {
return (
<div>
<audio src={audioFile} controls />
</div>
);
}
}
export default AudioPlayer;
```
阅读全文
相关推荐


















