登录 注册

思源有声书制作可行性

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

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

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

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

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

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

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

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 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 回帖
思源有声书制作可行性

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons •
    付费者 捐赠者

    一样的

    只要设置 audio.currentTime = startTime; 就是开始时间

    播放到某时间点结束，可以这样

    // 监听时间更新事件，检查是否到达结束时间
    audio.addEventListener('timeupdate', function() {
        if (audio.currentTime >= endTime) {
            audio.pause(); // 停止播放
        }
    });

    然后调用播放的地方可以 playAudio(event, mp3, startTime, endTime)

    总之，写代码也是这个思路，要播放音频就得自己加个 audio 标签。至于触发方式我觉得可以在文字块前或后加个标志图标，比如声音图标，然后给这个图标添加事件触发播放。获取块属性可以用 api /api/attr/getBlockAttrs,但从你的需求来看，直接通过 dom 属性查找元素更符合需求，比如，document.querySelector('[custom-attrname="xxxx"]')。

    1 回复
  • 其他回帖
  • wilsons • • 1 • 1 赞同
    付费者 捐赠者

    这是因思源块内无法添加自定义元素和自定义属性导致的，详见 Issue #13325 · siyuan-note/siyuan

    又加上 emoji 是字符不好获取点击事件，所以现在放弃 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 •
    付费者 作者

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

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

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

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

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

    也谢谢你！你是一个懂得感恩的人，别的不说，光这一点所有努力都值得了！

    刚才好像在哪看到你说平板有问题来着，找不到了，我刚才在手机试了下，最新版手机上没问题，但移动端是没有鼠标悬停效果的。

    另外，要注意，确保资源文件放到了 assets 目录里或者是在线版的，如果音频文件是本地文件，在移动端是无法访问的。

    题外话，早上回复了一个问题, 希望思源笔记中能够点击单词进行播放单词的声音 - wilsons 的回帖 我现在突然觉得，这种方案或许是更方便的方案。

    你可以正常输入文本，只需要在需要播放音频的地方插入一个链接就可以了，然后后面我再改进下，比如可以设置 URL 参数 start=xx&end=xxx 等，然后就能达到你现在同样的效果了。

    如果批量插入，也可以 [文本](path/xxx.mp3?start=xx&end=xxx) 来插入链接就可以了，链接文本同样可以是 Emoji。

    目前仅仅是觉得可行，后续空了试试看，如果可行的话可以把这个链接方案完善下。

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

近期热议

推荐标签 标签

  • Firefox

    Mozilla Firefox 中文俗称“火狐”（正式缩写为 Fx 或 fx，非正式缩写为 FF），是一个开源的网页浏览器，使用 Gecko 排版引擎，支持多种操作系统，如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 410 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 29 关注
  • 互联网

    互联网（Internet），又称网际网络，或音译因特网、英特网。互联网始于 1969 年美国的阿帕网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协议相连，形成逻辑上的单一巨大国际网络。

    98 引用 • 344 回帖
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘（Capacitive Keyboard）。

    5 引用 • 74 回帖 • 478 关注
  • 强迫症

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

    15 引用 • 161 回帖 • 3 关注
  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • 微软

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

    8 引用 • 44 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高，单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 101 关注
  • danl
    • 146 关注
  • 电影

    这是一个不能说的秘密。

    121 引用 • 604 回帖 • 1 关注
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3190 引用 • 8214 回帖 • 1 关注
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本，加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较（vimdiff）、语法高亮、全面的帮助系统、本地脚本（Vimscript）和便于选择的可视化模式。

    29 引用 • 66 回帖 • 2 关注
  • Latke

    Latke 是一款以 JSON 为主的 Java Web 框架。

    71 引用 • 535 回帖 • 789 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似，也就是用各类命令预先放入到一个文件中，方便一次性执行的一个程序文件，主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大，比用其他编程程序编辑的程序效率更高，因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 2 关注
  • 书籍

    宋真宗赵恒曾经说过：“书中自有黄金屋，书中自有颜如玉。”

    78 引用 • 391 回帖
  • OAuth

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

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

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 5 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言，可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克（Rob Pike）说：我们之所以开发 Go，是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    497 引用 • 1388 回帖 • 278 关注
  • 宕机

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

    13 引用 • 82 回帖 • 60 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    492 引用 • 926 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 715 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 623 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1114 回帖 • 125 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件，最早由德国 Innotek 公司开发，由 Sun Microsystems 公司出品的软件，使用 Qt 编写，在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 1 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 361 关注

最新标签