[js] 英语学习者的福音,一键播放音频链接

又名拦截指定关键词的链接并播放链接音频。

对于英语学习者来说,有些单词或句子需要听听真人发音,但思源里直接播放音频很不方便。

如果能直接插入音频播放按钮就好了,那么现在可以了。

效果:

image.png

使用说明:

一、手动插入链接

编辑器输入 /链接 或 /lianjie 在链接中输入你的链接即可,比如 https://res.iciba.com/xxxx.mp3,当你的链接中含有 audioLinkKeywords 参数中指定的关键词时,则自动拦截链接的点击并播放音频

当锚文本链接输入 * 号时,则会使用图片作为播放音频的按钮,图片可以在 defaultImage 相关参数中配置或使用默认配置即可

当链接地址中输入 auto:开头的链接时,将自动获取音频,默认从 iciba.com 网站获取音频,可在 getAudioSrcByNet 函数中修改获取逻辑

自动获取连接规则,比如,auto:hello:en,这里 auto:是关键词,hello 是要查询的关键词,en 是代表英音,am 代表美音,默认是 am,比如 auto:hello

二,批量插入链接

批量插入指在其他编辑中格式化好后,批量插入。

批量插入的格式举例如下:

hello [*](auto:hello)
good [*](auto:good:en)
a /ə/ [▶️](https://res.iciba.com/xxxx.mp3)

格式说明:

[*]和[▶️] 是链接描述文字,* 代表图片作为播放音频的按钮,▶️ 是自定义的 emoji 表情,也可以用普通文本

(auto:good:en) 代表自动获取音频,auto:是开启自动获取的关键词,good 是带查询的英语单词,en 代表英音,am 代表美音,美音也可以省略不写

(https://res.iciba.com/xxxx.mp3) 代表是你自定义的音频链接

链接中加 start 和 end 参数可以控制音频播放的开始和结束时间点,支持纯数字秒数和 srt 时间格式
比如,(https://res.iciba.com/xxxx.mp3?start=10&end=20)(auto:hello?start=0&end=20)

使用演示:

r105.gif

参数说明:

audioLinkKeywords,指定哪些链接关键词自动拦截并播放音频。

defaultEmoji,默认播放按钮 Emoji。

defaultImage,defaultImageWidth,defaultImageHeight,defaultImageZoom,defaultImageTop,配置默认播放按钮图片。

更多样式可在 addStyle 调用函数里修改。

自动获取音频文件,默认从 iciba.com 网站获取,如果想自定义,修改 getAudioSrcByNet 函数即可。

代码:

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90%E6%8B%A6%E6%88%AA%E6%8C%87%E5%AE%9A%E5%85%B3%E9%94%AE%E8%AF%8D%E7%9A%84%E9%93%BE%E6%8E%A5%E5%B9%B6%E6%92%AD%E6%94%BE%E9%93%BE%E6%8E%A5%E9%9F%B3%E9%A2%91.js

其他:

除了播放英语音频,其他音频也是可以的。这里用英语学习音频只是个举例说明。

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22852 引用 • 91824 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    81 引用 • 444 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...