用更规范的方式给 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

6 个赞

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

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

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

1 个赞

nonwill 魔改版也不支持么?

我一直用nonwill版本

2 个赞

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

1 个赞

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

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

1 个赞

这样的吗?

GD可以播放的。。

1 个赞

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

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

2 个赞

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

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