396 字
2 分钟
音频朗读条
音频朗读条(Audio Reader)允许在正文中为特定词句或短语插入行内发音、有声朗读或音频试听按钮。
语法格式
使用 :audio-reader 文本指令并传入音频文件地址 src:
日语中「ありがとう」的读音为 :audio-reader[发音示范]{src="/assets/audio/arigatou.mp3"}。渲染效果(本站示例音频位于 public/assets/music/url/):
日语中「ありがとう」的读音为 发音示范。
点击徽章即可播放对应片段。
放在句子中间
audio-reader 是纯行内语法,可以与文字、高亮、行内代码自由混排:
这个词在英式英语中读作 :audio-reader[英音]{src="/assets/audio/en-uk.mp3"},在美式英语中读作 :audio-reader[美音]{src="/assets/audio/en-us.mp3"}。与其它音频方案的取舍
| 方案 | 语法 | 适用场景 |
|---|---|---|
| 行内朗读条 | :audio-reader[文字]{src="..."} | 单词发音、短句示范 |
| HTML5 音频 | <audio controls src="..."> | 独立成段的完整音频 |
| ArtPlayer | ::artplayer{...} | 需要播放控制的音频流 |
- 短发音用
:audio-reader,读者不需要离开阅读动线。 - 整段音频(播客、音乐)建议用艺术播放器或原生
<audio>标签单独成段。
交互效果
- 正文中呈现为精巧的发音波形微徽章。
- 点击后播放对应音频片段,并带有声波跳动视觉反馈。
- 采用原生 Web Audio API 与 HTML5 Audio,轻量流畅。
Markdown 语法
已完结分享文章
生成精美分享图或复制链接,与更多人分享本文。
继续阅读
最后更新于 ,距今已过 0 天
部分内容可能已过时
评论