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

技术交流与词典编修
1

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

6 Likes
2

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

3

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

4

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

1 Like
5

nonwill 魔改版也不支持么？

6

我一直用nonwill版本

2 Likes
7

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

1 Like
8

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

9

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

1 Like
11

这样的吗？

IMG_20220904_200858
IMG_20220904_2008581080×631 57.5 KB

13

GD可以播放的。。

1 Like
15

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

17

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

2 Likes
18

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

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