登录 注册

思源有声书制作可行性

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

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

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

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

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

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

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

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

  • 思源笔记

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

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

    28451 引用 • 119806 回帖 • 1 关注
  • Q&A

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

    11158 引用 • 50674 回帖 • 50 关注
1 引用
[js] 英语学习者的福音，一键播放音频链接 • wilsons
天津 位置
100 悬赏
1 关注
5 收藏
1 引用
19 回帖
10
9
1.2k 279 14 366 5 1 554

相关帖子

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

    0.0.4 兼容时间格式，标题 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

    新增参数

    // 标题播放按钮自定义 Emoji，使用方式同 playEmojiCustom 参数(二者可共存)，不使用该参数，填空即可
    const playEmojiCustomHead = '';

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

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

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

  • 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 回复
  • 查看全部回帖
towfd
天津
回帖
23
 帖子
5
 积分
147

近期热议

推荐标签 标签

  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具，是一个全面整合的专业游戏引擎。

    27 引用 • 7 回帖 • 93 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • OAuth

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

    36 引用 • 103 回帖 • 43 关注
  • HHKB

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

    5 引用 • 74 回帖 • 548 关注
  • gRpc
    11 引用 • 9 回帖 • 116 关注
  • Swift

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

    34 引用 • 37 回帖 • 563 关注
  • Chrome

    Chrome 又称 Google 浏览器，是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写，包括 WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • 持续集成

    持续集成（Continuous Integration）是一种软件开发实践，即团队开发成员经常集成他们的工作，通过每个成员每天至少集成一次，也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • 导航

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

    45 引用 • 177 回帖
  • etcd

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

    6 引用 • 26 回帖 • 558 关注
  • Thymeleaf

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

    11 引用 • 19 回帖 • 413 关注
  • C++

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

    110 引用 • 153 回帖
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 641 关注
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • CongSec

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

    1 引用 • 1 回帖 • 55 关注
  • 区块链

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

    92 引用 • 752 回帖
  • WebComponents

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

    1 引用 • 17 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统，实现一个自托管的 Git 项目仓库，可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    105 引用 • 908 回帖
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 50 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    6 引用 • 144 回帖 • 3 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    22 引用 • 148 回帖 • 27 关注
  • Swagger

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

    26 引用 • 35 回帖 • 16 关注
  • Windows

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

    232 引用 • 484 回帖
  • 运维

    互联网运维工作，以服务为中心，以稳定、安全、高效为三个基本点，确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务，可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 120 关注

最新标签