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,轻量流畅。

第 30 篇,共 30 篇本文属于系列

音频朗读条
https://www.ariels.xyz/posts/media-audio/
作者
Ariel
发布于
2026-10-16
许可协议
CC BY-NC-ND 4.0

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

沿着主题读

基于共同的标签与分类

换条路线

从其他文章中稳定抽取

评论

正在加载评论...