用更规范的方式给 MDX 嵌入音频

HTML5 有专门的 audio 标签,但因为样式不能调整,很多人用 a 标签、Font Awesome 来给 MDX 加音频:


<a href="sound://pronunciations/mp3/number/4x40001v.mp3" class="fa fa-volume-up pron_i play_pron" data-word="also" data-dir="number" data-file="4x40001v" data-pron="ˈfoɚbaɪˌfoɚ" data-lang="en_us"></a>

这里我给出另外一种方法:


<button type="button" style="border: none; padding: 0;" onClick="if(this.nextSibling.paused){this.nextSibling.play()}else{this.nextSibling.pause()}">⏯️</button><audio><source src="pronunciations/mp3/number/4x40001v.mp3"></audio>

点一次:play_or_pause_button:播放,再点一次则暂停,再点一次继续播放(主要用于例句发音)。button 样式可按喜好更改。为照顾视力受损者,:play_or_pause_button:后边可加上 <span class=“screen-reader screen-reader-focusable”>Play/Pause</span>,具体请看:Hidden content for better a11y | Go Make Things

3 Likes

各词典软件对这种写法的支持情况如何?

支持 audio 标签的软件应该都可以。需要测试。

Goldendict就不支持audio标签,否决!

1 Like

nonwill 魔改版也不支持么?

我一直用nonwill版本

GoldenDict 成词典软件界的 Windows XP 了。