登录 注册

思源有声书制作可行性

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

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

通过观察其他 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 回帖
思源有声书制作可行性

欢迎来到这里！

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

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

    一定要在文本里加 audio 标签吗？js 没法直接获取文件名播放吗？主要转变成 html 后编辑比较麻烦

    1 回复
    以我个人写 HTML 和 js 的经验来看还是用 audio 居多，就算不显示出来也是播放隐藏的 audio。不过确实没做过在思源里播放音频，可能有别的方法
    EmptyLight •
    @EmptyLight 我主要不想把文本设置成 html 块，那直接每个文档插入音频（思源插入的音频本身就带 audio 标签），但是一个文档可能有多个音频，点击图标时播放定位块属性中的 audiofile 和对应时间可行吗？
    towfd •
    @towfd 这个我确实没有尝试过，需要等其他人知道的来回答了
    EmptyLight •
  • 其他回帖
  • 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 •
    付费者 捐赠者

    一样的

    只要设置 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
    付费者 捐赠者

    已按照你说的方式实现 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

    然后，修改下下面这个参数即可。

    // 标题播放按钮 Emoji，不使用该参数，填空即可
    //（该功能是通过获取标题下的所有音频的最小开始时间和最大结束时间实现的，因此不通用，如果你的音频不是连续播放的，勿用此功能）
    const playEmojiHead = ''; //⏩

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

近期热议

推荐标签 标签

  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 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 关注

最新标签