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

lurker · 2021 年4 月 10 日 04:34

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>

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

Vim · 2021 年4 月 10 日 05:15

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

lurker · 2021 年4 月 10 日 05:22

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

韦传o朗 · 2021 年4 月 10 日 10:02

Goldendict就不支持audio标签，否决！

lurker · 2021 年4 月 10 日 10:42

nonwill 魔改版也不支持么？

韦传o朗 · 2021 年4 月 16 日 07:16

我一直用nonwill版本

lurker · 2021 年4 月 16 日 12:12

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

xiaoyifang · 2022 年2 月 9 日 05:55

audio这种html5，一般词典都是支持的，不支持的应该是audio嵌入的音频格式。

xiaoyifang · 2022 年2 月 9 日 05:58

楼主的想法是个好想法。
可以从js，css，音频，视频各种格式的采用整体规范一个标准最好了。比如音视频的格式最好是开源标准的，如webm等。
现在的词典，百花齐放。各种技巧。

alexpeng · 2022 年9 月 4 日 12:09

这样的吗？

alexpeng · 2022 年9 月 4 日 12:12

GD可以播放的。。

alexpeng · 2022 年9 月 4 日 12:18

用DictTango调试源文件？等作者的IDE出来才可以吧。

alexpeng · 2022 年9 月 4 日 12:36

这就是全宋体。我只是加粗了一点点

glacierlee · 2022 年9 月 4 日 13:12

其实不用等IDE出来也可以进行源文件调试，按照以下步骤就行

确保手机和电脑在同一个WIFI网络，用USB连接手机到电脑
打开手机上的USB调试模式（这个需要先开启手机上的开发者模式）
打开手机DictTango的设置里的调试模式
打开阅读模式查词。用普通模式也可以，但会很难区分具体的webview是属于哪个词典的
在电脑端的Chrome浏览器打开 chrome://inspect/ 这个网址，然后Chrome就会搜索到你的手机设备，然后点击相关Webviewe实例下的Inspect 按钮进行源内容调试及屏幕同步

xliley · 2026 年1 月 31 日 11:18

点这个播放小箭头可以播放，暂停，继续播放，向请教一下，有没有可能改为播放，停止，不要继续播放。
法语时尚100词带音频 - 法语 - FreeMdict Forum
我这个里面长Mp3 分段播放，设置了起始秒数，怎么改为播放后不要再按后继续播放，直接停止，谢谢