mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
102 lines
3.0 KiB
Markdown
102 lines
3.0 KiB
Markdown
---
|
||
title: Audio Reader 音频
|
||
icon: rivet-icons:audio
|
||
createTime: 2024/12/24 22:31:01
|
||
permalink: /guide/embed/audio/reader/
|
||
---
|
||
|
||
## 概述
|
||
|
||
主题支持在文档中嵌入 音频阅读 。
|
||
|
||
该功能由 [vuepress-plugin-md-power](../../config/plugins/markdown-power.md) 提供支持。
|
||
|
||
**音频阅读** 并不是一个音乐播放器，它仅是在内容中嵌入一个（ @[audioReader](https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio) ）按钮，点击后播放一段音频。
|
||
|
||
它适合用于播放一些短时间的音频，比如 **单词标音** 。
|
||
|
||
## 配置
|
||
|
||
该功能默认不启用。你需要在主题配置中开启。
|
||
|
||
```ts title=".vuepress/config.ts"
|
||
export default defineUserConfig({
|
||
theme: plumeTheme({
|
||
markdown: {
|
||
audioReader: true, // [!code ++]
|
||
},
|
||
})
|
||
})
|
||
```
|
||
|
||
## markdown 语法
|
||
|
||
音频嵌入 markdown 语法是一个 行内语法，因此你可以在 markdown 的任何地方中使用。
|
||
|
||
```md
|
||
@[audioReader](src)
|
||
```
|
||
|
||
添加配置项：
|
||
|
||
```md
|
||
@[audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"](src)
|
||
```
|
||
|
||
**配置说明：**
|
||
|
||
- `type`：音频类型，格式如：`audio/mpeg` ,
|
||
默认根据音频链接地址的文件扩展名推断，如果链接地址中不包含扩展名，请手动声明。
|
||
- `title`： 音频标题，显示在音频图标之前。
|
||
- `autoplay`：是否自动播放，不建议启用。
|
||
- `start-time`：音频起始播放时间点，单位为 秒。
|
||
- `end-time`：音频结束播放时间点，单位为 秒。
|
||
- `volume`：音频播放音量，范围为 `0 ~ 1` 。
|
||
|
||
## 全局组件
|
||
|
||
主题提供了全局组件 `<AudioReader />` 以支持更灵活丰富的使用方式。
|
||
|
||
### Props
|
||
|
||
| 字段 | 类型 | 描述 |
|
||
| --------- | --------- | ----------------------------------- |
|
||
| src | `string` | 必填，音频播放地址 |
|
||
| type | `string` | 选填，音频格式，默认从 `src` 中截取 |
|
||
| autoplay | `boolean` | 选填，是否自动播放，不建议启用 |
|
||
| startTime | `number` | 选填，音频起始播放时间点，单位为 秒 |
|
||
| endTime | `number` | 选填，音频结束播放时间点，单位为 秒 |
|
||
| volume | `number` | 选填，音频播放音量，范围为 `0 ~ 1` |
|
||
|
||
## 示例
|
||
|
||
**输入：**
|
||
|
||
```md
|
||
audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3)
|
||
```
|
||
|
||
**输出：**
|
||
|
||
audio 美 [ˈɔːdioʊ] @[audioReader](https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio)
|
||
|
||
**输入：**
|
||
|
||
```md
|
||
audio 美 @[audioReader title="[ˈɔːdioʊ]"](/audio/audio.mp3)
|
||
```
|
||
|
||
**输出：**
|
||
|
||
audio 美 @[audioReader title="[ˈɔːdioʊ]"](https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio)
|
||
|
||
**输入：**
|
||
|
||
```md
|
||
audio 美 <AudioReader src="/audio/audio.mp3">[ˈɔːdioʊ]</AudioReader>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
audio 美 <AudioReader src="https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio">[ˈɔːdioʊ]</AudioReader>
|