[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

其他:

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

  • 思源笔记

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

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

    23012 引用 • 92563 回帖
  • 代码片段

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

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

    90 引用 • 561 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 其他回帖
  • 请教一下怎么使用哦

    1 回复
  • wilsons

    【建议根据下面的介绍,动手一步步试试,更容易理解】

    和插入一个普通的链接一样。

    比如,你的链接是 https://res.iciba.com/resource/amp3/1/0/75/5f/755f85c2723bb39381c7379a604160d8.mp3,没有用这个代码片段前,你点击这个链接会跳转到浏览器,然后会显示一个音频播放器播放这个音频。

    使用这个代码片段后,你点击这个链接会直接播放音频,不会任何跳转。

    那么它是怎么判断哪些链接是音频链接?哪些链接是普通链接的呢(普通链接需要跳转)?

    就是通过代码中的 const audioLinkKeywords=['res.iciba.com',...] 参数指定的,比如这个参数里你配置了 res.iciba.com 这个关键词,那么,当你点击链接时,代码会判断这个链接中是否含有 res.iciba.com 关键词,如果有则当做音频链接,直接播放,如果没有则当做普通链接,继续跳转。

    知道这个原理后就知道怎样使用了吧。

    然后进一步说明,在链接的锚文本中可以输入普通文本,emoji,* 等,当输入*号时,会把 * 号解析为一个图片按钮(比如一个小喇叭图片image.png ),这个图片即 defaultImage 参数中指定的图片,这样链接就不仅仅显示为一个文本或 emoji 了,还可以显示一个自定义的图片,这样链接看起来更美观。

    再进一步,如果你没有专门的音频播放链接的话,你可以把你的链接输入一个以 auto:开头的链接,比如在链接输入框中输入 auto:hello:en,这个链接会自动去 www.iciba.com 官网获取真实的音频链接,获取的是哪个单词的音频链接呢?就是 auto:后面的那个 hello 单词。最后一个 en,意思是获取 hello 单词的英音音频链接,美音是 am,美音也可以省略不写,比如 auto:hello:am 和 auto:hello 都代表获取 hello 单词的美音。

    最后,如果你的链接中含有 start 或 end 参数时,比如你的链接是 assets/xxxx.mp3?start=10&end=20,则播放该音频时,会自定跳转到音频的第 10 秒处开始播放,播放到 20 秒处停止。

    最后的最后,假设还有这样一种场景,你有一个英语学习音频,并且这个音频有一些字幕文件。你想把这些字幕文件复制到思源中,并且想点击某个句子播放音频中对应的部分。那么,你就可能用到文档中介绍的批量插入的内容了。意思是把字幕文件在编辑器中格式化成文本和链接的形式后,然后一次性粘贴到思源中。如果还不理解,建议看看这些帖子的使用场景 思源有声书制作可行性希望思源笔记中能够点击单词进行播放单词的声音怎么快速插入音频,并设置锚文本点击即播放? ,说不定就理解了。

    1 回复
    1 操作
    wilsons 在 2024-12-19 02:02:07 更新了该回帖
  • 群主讲的太透彻了,感谢解答 🙏