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

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

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

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

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

Screenshot20241101162557org.b3log.siyuan.jpg

  • 思源笔记

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

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

    22346 引用 • 89409 回帖 • 1 关注
  • Q&A

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

    8116 引用 • 37016 回帖 • 160 关注

相关帖子

被采纳的回答
  • 方法一,使用 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

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 你的理解没错,思源的 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 回复
  • 其他回帖
  • 方法一,使用 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 回复
  • 查看全部回帖

推荐标签 标签

  • 房星科技

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

    6 引用 • 141 回帖 • 585 关注
  • Eclipse

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

    75 引用 • 258 回帖 • 618 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 629 关注
  • 思源笔记

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

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

    22346 引用 • 89408 回帖 • 1 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 595 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    15 引用 • 122 回帖
  • GitBook

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

    3 引用 • 8 回帖 • 4 关注
  • WiFiDog

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

    1 引用 • 7 回帖 • 587 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    70 引用 • 375 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 155 关注
  • 运维

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

    149 引用 • 257 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    190 引用 • 1057 回帖
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    25 引用 • 191 回帖 • 16 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • TensorFlow

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

    20 引用 • 19 回帖
  • Ubuntu

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

    125 引用 • 169 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 530 关注
  • Laravel

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

    20 引用 • 23 回帖 • 721 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • C

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

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

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3187 引用 • 8213 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖 • 1 关注
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    341 引用 • 708 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 130 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖