思源有声书制作可行性

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

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

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

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

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

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

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

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 155 关注
被采纳的回答
  • 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-前缀,注意属性使用小写,否则思源也会转换为小写。

    祝你好运 🍀

    效果:

欢迎来到这里!

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

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

    就是和原来类似的加一个播放按钮,只是这个按钮是连续播放该级标题下的所有有声句(句子本身通常是连贯的,所以应该只需要读取第一个句子的 start 和最后一个句子的 end ,可能判定标题正文是在哪里结束的更麻烦点?因)。按钮具体什么样倒没有设定,也是 emoji 图标,和单句的图标有区别就行,你先随便设定一个图标就行。

    1 回复
  • 其他回帖
  • 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-前缀,注意属性使用小写,否则思源也会转换为小写。

    祝你好运 🍀

    效果:

    2 回复
  • 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 回复
  • 也谢谢你!你是一个懂得感恩的人,别的不说,光这一点所有努力都值得了!

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

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


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

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

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

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

    1 回复
  • 查看全部回帖

推荐标签 标签

  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1520 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    171 引用 • 512 回帖
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • Vim

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

    29 引用 • 66 回帖 • 2 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    55 引用 • 85 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 50 关注
  • 开源

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

    407 引用 • 3578 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 15 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    156 引用 • 3792 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 626 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 317 关注
  • Hibernate

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

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

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 745 关注