登录 注册

思源有声书制作可行性

本贴最后更新于 194 天前，其中的信息可能已经天翻地覆

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

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

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

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

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

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

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

  • 思源笔记

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

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

    25860 引用 • 107105 回帖 • 1 关注
  • Q&A

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

    9928 引用 • 45082 回帖 • 79 关注
1 引用
[js] 英语学习者的福音，一键播放音频链接 • wilsons
天津 位置
100 悬赏
1 关注
5 收藏
1 引用
19 回帖
10
9
1.0k 277 5 327 1 394

相关帖子

被采纳的回答
  • 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 • • 2
    付费者 捐赠者

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

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

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

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

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

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

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

    1 回复
  • 其他回帖
  • 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 • • 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 • • 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
天津
回帖
23
 帖子
5
 积分
147

近期热议

推荐标签 标签

  • 深度学习

    深度学习（Deep Learning）是机器学习的分支，是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    43 引用 • 44 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 554 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 8 关注
  • Sillot

    Insights（注意当前设置 master 为默认分支）

    汐洛彖夲肜矩阵（Sillot T☳Converbenk Matrix），致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点。其中汐洛绞架（Sillot-Gibbet）基于自思源笔记（siyuan-note），前身是思源笔记汐洛版（更早是思源笔记汐洛分支），是智慧新录乄终端（多端融合，移动端优先）。

    主仓库地址：Hi-Windom/Sillot

    文档地址：sillot.db.sc.cn

    注意事项：

    1. ⚠️ 汐洛仍在早期开发阶段，尚不稳定
    2. ⚠️ 汐洛并非面向普通用户设计，使用前请了解风险
    3. ⚠️ 汐洛绞架基于思源笔记，开发者尽最大努力与思源笔记保持兼容，但无法实现 100% 兼容
    29 引用 • 25 回帖 • 119 关注
  • Kafka

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

    36 引用 • 35 回帖 • 1 关注
  • Ubuntu

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

    127 引用 • 169 回帖 • 1 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 154 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本，现在仍处于发展阶段。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 2 关注
  • ngrok

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

    7 引用 • 63 回帖 • 655 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 233 回帖 • 3 关注
  • Vim

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

    29 引用 • 66 回帖
  • golang

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

    499 引用 • 1395 回帖 • 244 关注
  • CongSec

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

    1 引用 • 1 回帖 • 36 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计，是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 739 关注
  • C

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

    86 引用 • 165 回帖
  • HHKB

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

    5 引用 • 74 回帖 • 519 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 反馈

    Communication channel for makers and users.

    122 引用 • 912 回帖 • 280 关注
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖 • 1 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1742 回帖 • 6 关注
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统，它问世于 1985 年，起初仅仅是 Microsoft-DOS 模拟环境，后续的系统版本由于微软不断的更新升级，不但易用，也慢慢的成为家家户户人们最喜爱的操作系统。

    227 引用 • 476 回帖
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 676 关注
  • TensorFlow

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

    20 引用 • 19 回帖
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 433 关注

最新标签