怎么快速插入音频,并设置锚文本点击即播放?

在学外语,做笔记梳理时,想给句子加上音频,已经有句子文本和音频文件名的对应文本,怎么能快速将句子设置为音频的锚文本,并点击锚文本即播放呢?

直接插入音频后,会直接显示音频控件,占据的位置太大了,而且也没找到在哪里设置锚文本。

通过超链接设置句子为锚文本后,点击文本会在另一个标签弹出音频控件,然后再点击才能播放,而且要一句一句去设置填写,也比较麻烦。

想问问有没有能直接通过某种格式把我的句子和音频直接转换成点击即播放的形式吗?

Screenshot20241101162557org.b3log.siyuan.jpg

  • 思源笔记

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

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

    24055 引用 • 98032 回帖 • 1 关注
  • Q&A

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

    9000 引用 • 41002 回帖 • 129 关注
被采纳的回答
  • wilsons 1

    方法一,使用 HTML 块实现(编辑器输入 /html,把代码粘贴到对话框即可)

    需要开启 设置 》编辑器 》允许执行 HTML 块内脚本

    <!-- mp3 列表 -->
    <a onclick="playAudio(event,this.href);" href="file:///youpath/demo1.mp3" >demo1</a><br>
    <a onclick="playAudio(event,this.href);" href="file:///youpath/demo2.mp3">demo2</a><br>
    
    <!-- js 代码 -->
    <script>
        var audio;
        function playAudio(event,mp3) {
            event.preventDefault();
            if(!audio){
                audio = document.createElement('audio');
                document.body.appendChild(audio);
            }
            audio.src = mp3;
            audio.play();
        }
    </script>
    

    方法二,使用 SQL 查询块实现(编辑器输入 {{}},把代码粘贴到对话框即可)

    //!js
    return (async () => {
        // 这里配置mp3列表
        const mp3List = {
            "demo1": "file:///youpath/demo1.mp3",
            "demo2": "file:///youpath/demo2.mp3",
        };
    
        // 代码逻辑区
        let list = [];
        for (let key in mp3List) {
            list.push(`<div><span data-type="a" data-mp3="${mp3List[key]}">${key}</span></div>`);
        }
        return render(`<div class="mp3List-wrapper">${list.join('')}</div>`, (embed) => {
            embed.querySelector('.mp3List-wrapper').addEventListener('click', (event) => {
                const mp3 = event.target?.dataset?.mp3;
                if (mp3) {
                    playAudio(mp3);
                }
            });
        });
        var audio;
        function playAudio(mp3) {
            if(!audio){
                audio = document.createElement('audio');
                document.body.appendChild(audio);
            }
            audio.src = mp3;
            audio.play();
        }
        function render(html, callback) {
            onRender('.b3-form__space--small').then((container) => {
                const wysiwygEmbed = container.parentElement;
                wysiwygEmbed.style.backgroundColor = 'transparent';
                wysiwygEmbed.style.borderLeft='none';
                container.outerHTML = html;
                if(callback) callback(wysiwygEmbed);
            });
            return [];
        }
        function onRender(selector) {
            return new Promise(resolve => {
                const check = () => {
                    let el = item.querySelector(selector);
                    if (el) resolve(el); else requestAnimationFrame(check);
                };
                check();
            });
        }
    })();
    

    效果

    image.png

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 目前没有专门为思源设计音频播放的控件,使用的是浏览器原生的控件,所以是这样的。

  • towfd

    这个是创建时间戳,可是我的音频本身已经对照句子切割好了,我的需求是快速将文本和音频插入,并且点击文本可以直接播放音频。我翻了上面功能介绍:

    如果是在思源软件里点击时间戳,将会在一个新的窗口中打开目标音视频,并跳转到对应的时间点。

    这条说明好像和我原帖描述的也是一样的情况,点击会跳出控件,然后还需要再次点击播放,只是增加了个时间戳定位

  • wilsons 1

    方法一,使用 HTML 块实现(编辑器输入 /html,把代码粘贴到对话框即可)

    需要开启 设置 》编辑器 》允许执行 HTML 块内脚本

    <!-- mp3 列表 -->
    <a onclick="playAudio(event,this.href);" href="file:///youpath/demo1.mp3" >demo1</a><br>
    <a onclick="playAudio(event,this.href);" href="file:///youpath/demo2.mp3">demo2</a><br>
    
    <!-- js 代码 -->
    <script>
        var audio;
        function playAudio(event,mp3) {
            event.preventDefault();
            if(!audio){
                audio = document.createElement('audio');
                document.body.appendChild(audio);
            }
            audio.src = mp3;
            audio.play();
        }
    </script>
    

    方法二,使用 SQL 查询块实现(编辑器输入 {{}},把代码粘贴到对话框即可)

    //!js
    return (async () => {
        // 这里配置mp3列表
        const mp3List = {
            "demo1": "file:///youpath/demo1.mp3",
            "demo2": "file:///youpath/demo2.mp3",
        };
    
        // 代码逻辑区
        let list = [];
        for (let key in mp3List) {
            list.push(`<div><span data-type="a" data-mp3="${mp3List[key]}">${key}</span></div>`);
        }
        return render(`<div class="mp3List-wrapper">${list.join('')}</div>`, (embed) => {
            embed.querySelector('.mp3List-wrapper').addEventListener('click', (event) => {
                const mp3 = event.target?.dataset?.mp3;
                if (mp3) {
                    playAudio(mp3);
                }
            });
        });
        var audio;
        function playAudio(mp3) {
            if(!audio){
                audio = document.createElement('audio');
                document.body.appendChild(audio);
            }
            audio.src = mp3;
            audio.play();
        }
        function render(html, callback) {
            onRender('.b3-form__space--small').then((container) => {
                const wysiwygEmbed = container.parentElement;
                wysiwygEmbed.style.backgroundColor = 'transparent';
                wysiwygEmbed.style.borderLeft='none';
                container.outerHTML = html;
                if(callback) callback(wysiwygEmbed);
            });
            return [];
        }
        function onRender(selector) {
            return new Promise(resolve => {
                const check = () => {
                    let el = item.querySelector(selector);
                    if (el) resolve(el); else requestAnimationFrame(check);
                };
                check();
            });
        }
    })();
    

    效果

    image.png

    2 回复
  • towfd

    感谢 🙏

  • towfd

    安卓是不能外部引用吗?

    href="file:///storage/emulated/0/AnkiDroid/collection.media/1A_2_listenAndSpeaking_2_00.16.014-00.18.066.mp3"
    

    我这么写,点击似乎播放不了。

    导入思源自己的的 assets 倒是可以播放,不过还有一点疑问。思源似乎不能像其他 markdown 笔记那样直接渲染 HTML,复制粘贴只被当作纯文本块,这样句子之间如果还想加入其他块描述,只能单独一个一个去单独建立 html 块吗?不然就只能把所有描述内容一起写进 html?但是这样所有内容都会被视作一个块,内部排版也不能像 md 那样直接书写了,点击某个句子也会整个一起闪屏。

    如果像其他 md 笔记,我可以提前把文本都替换成你上面给出的对应格式,然后再在句子间插入其他块描述就行了,也不会影响排版。思源似乎好些内容块只能主动去选择触发,没法像 md 那样以某种书写格式直接告诉软件应该按照什么渲染,这样想通过直接替换完成批量修改成某种模式似乎就没办法了,只能一个一个去主动选择吗?

    1 回复
  • 你的理解没错,思源的 HTML 没有其他笔记的那么直观,虽然思源不支持手动输入 HTML 代码,但粘贴 HTML 代码是可以的,所以建议你在外部编辑好后直接粘贴到文档里。

    但要注意思源的 HTML 代码必须以一个 div 标签包裹才行,比如

    <div>
    <p>hello world</p>
    <p>hello world</p>
    </div>
    

    这样粘贴就没问题,不会转换为实体

    但下面这种粘贴就会转换为 HTML 实体

    <p>hello world</p>
    <p>hello world</p>
    
    或
    
    <ul>
    <li>hello world</li>
    <li>hello world</li>
    </ul>
    

    解决办法就是在他们前面添加 div 包裹就没问题了,比如改成

    <div>
    <p>hello world</p>
    <p>hello world</p>
    </div>
    
    或
    
    <div>
    <ul>
    <li>hello world</li>
    <li>hello world</li>
    </ul>
    </div>
    

    有了上面的知识,那么批量修改你的代码就很方便了,比如修改成下面这样,然后再粘贴

    <div>
    <div>英语学习</div>
    <script>
        var audio;
        function playAudio(event,mp3) {
            event.preventDefault();
            if(!audio){
                audio = document.createElement('audio');
                document.body.appendChild(audio);
            }
            audio.src = mp3;
            audio.play();
        }
    </script>
    </div>
    
    描述1
    <div><a onclick="playAudio(event,this.href);" href="file:///yourpath/demo1.mp3" >demo1</a></div>
    
    描述2
    <div><a onclick="playAudio(event,this.href);" href="file:///yourpath/demo2.mp3" >demo2</a></div>
    
    

    这里的 <script> 标签页可以放到任意一个链接的 HTML 代码块中,这样就不用单独的占一个块了。

    如果你的版本不支持,也可以安装 vscode 插件,然后使用源码粘贴。

    当然,还有好的方法,比如通过插件或 js 片段魔改 audio 块等,太过复杂,仅供兴趣研究。

    1 回复
  • towfd

    太感谢你了,彻底解决了我的问题。

请输入回帖内容 ...

推荐标签 标签

  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 30 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • OneDrive
    2 引用 • 3 关注
  • Excel
    31 引用 • 28 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 485 关注
  • Mobi.css

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

    1 引用 • 6 回帖 • 753 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • 学习

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

    170 引用 • 513 回帖
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 2 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 207 关注
  • 周末

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

    14 引用 • 297 回帖 • 1 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 2 关注
  • B3log

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

    1063 引用 • 3455 回帖 • 177 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 437 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 30 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 印象笔记
    3 引用 • 16 回帖
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 600 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 996 回帖
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 72 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 780 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖