登录 注册

思源有声书制作可行性

经过一段时间摸索，我发现思源比其他笔记软件都更适合我的编辑需求。

因为在学语言，在将教材转换成文档的过程中，对有声的需求颇高（而纯播放器中的音频字幕又不方便添加说明阐释），所以想知道在本身已有字幕文件的情况下，有没有快速制作有声文档的可能？

通过观察其他 quicker 动作，我学会了通过直接在每个块后添加 {: attrName=""} 批量设置属性。所以，我自己的思路：可以通过这种方式快速将字幕文档中的每句/段话绑定 "start" "end" "audiofileName" 属性，然后粘贴进入思源，再在所有这些句子前后加入教材其他解释说明，也许就可以达到有声文档的制作。

但是我不太懂编程，缺失了最关键一步：如何通过代码片段获取这些属性，并控制播放（双击块，或者通过代码在块前或块后添加某个 emoji 图标，点击图标播放块对应的属性中的 audiofileName 文件 播放 start 到 end 时间的内容）。

目前有搜索到一些插件可以通过自定义音频块时间属性，跳转对应位置，所以感觉我的需求在思源中也许也是有可能做到的，不过我的需求要多几点：

  • 希望能直接点击播放，而不只是跳转后再点击播放
  • 可以在 end 对应时间结束播放

有没有了解思源和 js 的大佬们能不吝赐教 🙏

  • 思源笔记

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

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

    23017 引用 • 92581 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    8448 引用 • 38486 回帖 • 155 关注
1 引用
[js] 英语学习者的福音，一键播放音频链接 • wilsons
天津 位置
100 悬赏
1 关注
4 收藏
1 引用
19 回帖
10
9
308 260 28 1 18

相关帖子

被采纳的回答
  • wilsons • • 3 • 1 赞同
    付费者 捐赠者

    我说的添加 audio 标签不一定非要在 HTML 中显式的添加，用 js 隐式添加即可，但本质还是添加了 audio 标签。

    根据你的需求我实现了这个功能，不知道是否符合你的预期，仅供参考。

    首先，用 vscode 插件的 Markdown 源码中添加以下代码（思源中直接粘贴也可以，但 vscode 插件最保险，思源直接粘贴可能自定义属性被过滤，如果没过滤就可以，自己试试，我这边二者都可以）。

    demo1 ▶️
{: id="20241126195837-wtsvkrg" custom-attrname="" custom-audiofilename="file:///yourpath.mp3" custom-end="40" custom-start="30"}

demo2 ▶️
{: id="20241126195837-wtsvkrg" custom-attrname="" custom-audiofilename="file:///yourpath.mp3" custom-end="30" custom-start="20"}

    然后，思源 js 代码片段中添加以下代码

    https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90%E9%80%9A%E8%BF%87%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E6%92%AD%E6%94%BE%E5%9D%97%E9%9F%B3%E9%A2%91.js

    const attrName = 'attrname';
    const audioFileAttrName = 'audiofilename';
    const startTimeAttrName = 'start';
    const endTimeAttrName = 'end';
    const playEmoji = '▶️';

    这个几个参数根据自己需要修改，要与 Markdown 中的保持一致。

    注意：js 代码里不需要带 custom-前缀，但 Markdown 代码里必须加 custom-前缀，注意属性使用小写，否则思源也会转换为小写。

    祝你好运 🍀

    效果：

19 回帖
思源有声书制作可行性

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • towfd •
    付费者 作者

    谢谢谢谢，太麻烦你了 🙇‍♀️🙇‍♀️🙇‍♀️

    由于字幕本身时间格式是这样式的 00:00:10,500，之前版本我就让 ai 增加了一步

    // 将SRT时间格式（例如 "00:00:10,500"）转换为秒数
function convertSrtTimeToSeconds(timeStr) {
    const [time, millis] = timeStr.split(',');
    const [hours, minutes, seconds] = time.split(':').map(Number);
    return hours * 3600 + minutes * 60 + seconds + millis / 1000;
}

    observeAudioElements('custom-' + attrName.replace(/^custom\-/i,''), block => {
    // ......
  
    audioPlayBtn?.addEventListener('click', (event) => {
        const file = block.getAttribute('custom-' + audioFileAttrName.replace(/^custom\-/i,''));
        let startTime = block.getAttribute('custom-' + startTimeAttrName.replace(/^custom\-/i,''));
        let endTime = block.getAttribute('custom-' + endTimeAttrName.replace(/^custom\-/i,''));
  
        // 将SRT时间格式转换为秒数
        startTime = convertSrtTimeToSeconds(startTime);
        endTime = convertSrtTimeToSeconds(endTime);

    但新增加的代码，我再让 ai 修改，它只修改了 onHeadPlayEmojiAddition(head) 中的两处 starts.push(convertSrtTimeToSeconds(start)); 和 starts.push(convertSrtTimeToSeconds(start));，但尝试点击却并没有播放成功，感觉似乎并没有修改完全，但代码里面已经出现了太多 start 和 end，我的脑子也是一团浆糊，也不知道哪些该修改哪些不该。

    另外，这个标题按钮似乎只能支持原生 emoji，我自己保存的图标无论是以文件名的形式'playall'，还是以在思源中直接复制图标后生成的格式 ':playall:' 似乎都不起作用。因为我测试过程中，原生 emoji 虽然可能因为前面修改的不完善导致不能播放，但是会出现悬浮手指，而自定义的 emoji 则不会出现。不过这点不修改也不会影响啥，无论什么形式的 emoji 只要能正常播放就行。已经太麻烦你了。

    1 回复
  • 其他回帖
  • towfd •
    付费者 作者

    可以正常播放了，但是我好像发现了一点 bug。

    1. 每个块如果只要有了自定义播放按钮，在这个块的任何地方输入或删改任何内容都会将图标吞没。
    2. 原生 emoji，在我的尝试中不会被吞没，但是输入内容后光标会跳回行首，并且会丧失播放功能，但仍然会出现悬停手指。
    3. 无论是自定义还是原生，重启思源或刷新页面后都会导致原图标丧失播放功能，也仍然会出现悬停手指。

    这一点导致我最开始贴入代码时，反复重启思源（之前因为缓存导致了错误，所以我后面贴入代码都重启了）却并没能正常播放，然后我去对照了你增改的地方，发现似乎也是在那几处增加了 convertSrtTimeToSeconds，我本来仍然在想难道仍然是因为有什么地方格式没改完善？但心想你应该对自己代码很了解，如果你和 ai 都只选择了修改这几处，那应该更可能是其他地方有问题。

    于是我又开始尝试，发现我新增加的按钮就能正常播放，但因为按钮后习惯键入空格，以及在换行时，都出现了按钮被吞没的情况，我就又比较了自定义和原生、标题和自带属性的块的不同情况。自定义和原生情况如上，自带属性的块也会出现上述按钮被吞没或光标跳转行首的情况，但不会丧失播放功能（可能因为它的播放机制更简单、更直接？），所以我前几天没发现这个问题，因为光标跳一下我没当回事，光标丢失我也自己补上了，知道今天的重启后标题图标丧失播放功能才提醒我。

    1 回复
  • wilsons • • 2
    付费者 捐赠者

    谢谢！微薄之力，不敢当此殊荣哈。

    不懂为什么要多自定义一个空的 attrname 属性

    这个根据你之前的设定写的，这个作用是识别自定义块的标志，如果去掉，就无法识别到这个块是你自定义的了。

    不过，这个属性并不是必须的，如果想删除的话，可以把 observeAudioBlock 调用那里的 attrName 变量换成 audioFileAttrName 变量即可，这样就可以用音频文件属性查找自定义块了，如图所示

    image.png

    另外，早上我已经把代码更新到 0.0.2，这个版本增加了按钮鼠标悬停效果，增加了对自定义 emoji 的支持。

    自定义 Emoji 的使用方法：

    首先，Markdown 中添加如下代码，这里主要不同是:path/demo:这里，这是自定义 Emoji 的写法。

    demo3 :path/demo:
{: id="20241127091438-k3nryro" custom-end="30" custom-start="20" custom-attrname="" custom-audiofilename="file://yourpath/xxxx.mp3"}

    然后在 js 中，playEmojiCustom 参数设置为 path/demo 即可。

    注意，自定义 Emoji 无需舔加图片扩展名。

    假设自定义表情路径是，data/emojis/demo/demo.png，则只需要填写：demo/demo 即可。

    自定义 Emoji 可以和普通 Emoji 共存，不使用该参数，填空即可。

    代码（同之前的是同一个网址）：

    https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E6%80%9D%E6%BA%90%E9%80%9A%E8%BF%87%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7%E6%92%AD%E6%94%BE%E5%9D%97%E9%9F%B3%E9%A2%91.js

    1 回复
  • towfd • • 1 赞同
    付费者 作者

    是我修改属性名的问题，在各种复制粘贴中有的改了有的没改比较混乱，电脑可能因为缓存问题，能正常播放，导致我以为是移动端有啥问题。但是我自己发现问题改过来后已经能正常使用了，所以我随机又把回复删了。

    我昨晚也看了那个贴（因为和我的需求比较像），我上个贴也是说这种 [文本](path/xxx.mp3?start=xx&end=xxx) 格式插入后，点击不能直接播放，而是会直接跳转到资源页再点击才能播放，而直接按思源本身的方式插入音频，播放控件太大了，会影响页面布局排版。不过现在版本已经完全满足我目前的需求了，至于 srt 字幕文本到链接还是属性的批量格式替换，怎么转都差不多，不过链接的形式可能更好适配其他 md 笔记软件。

  • 查看全部回帖
towfd
天津
回帖
23
 帖子
5
 积分
147

近期热议

推荐标签 标签

  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    126 引用 • 169 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 364 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目，是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台，为开发者提供便利的 API 接口来调用服务，让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 486 关注
  • 导航

    各种网址链接、内容导航。

    42 引用 • 175 回帖
  • CentOS

    CentOS（Community Enterprise Operating System）是 Linux 发行版之一，它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码，因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 612 关注
  • 微软

    微软是一家美国跨国科技公司，也是世界 PC 软件开发的先导，由比尔·盖茨与保罗·艾伦创办于 1975 年，公司总部设立在华盛顿州的雷德蒙德（Redmond，邻近西雅图）。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 星云链

    星云链是一个开源公链，业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎，一个公链的所有功能，它基本都有，比如你可以用它来开发部署你的去中心化的 APP，你可以在上面编写智能合约，发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 6 关注
  • LeetCode

    LeetCode（力扣）是一个全球极客挚爱的高质量技术成长平台，想要学习和提升专业能力从这里开始，充足技术干货等你来啃，轻松拿下 Dream Offer！

    209 引用 • 72 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 632 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    407 引用 • 3578 回帖 • 1 关注
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言，在 20 世纪 90 年代中期由日本的松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）设计并开发。在 Ruby 社区，松本也被称为马茨（Matz）。

    7 引用 • 31 回帖 • 216 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息（如用户名与密码），即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权，因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 17 关注
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统，在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 1 关注
  • TGIF

    Thank God It's Friday! 感谢老天，总算到星期五啦！

    288 引用 • 4485 回帖 • 663 关注
  • 宕机

    宕机，多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态，也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态，也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 59 关注
  • 友情链接

    确认过眼神后的灵魂连接，站在链在！

    24 引用 • 373 回帖
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展，它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储，专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 528 关注
  • 服务器

    服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言，应用广泛。C++ 支持多种编程范式，面向对象编程、泛型编程和过程化编程。

    107 引用 • 153 回帖
  • 创业

    你比 99% 的人都优秀么？

    85 引用 • 1399 回帖 • 1 关注
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 2 关注

最新标签