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

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

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

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

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

Screenshot20241101162557org.b3log.siyuan.jpg

  • 思源笔记

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

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

    22391 引用 • 89649 回帖
  • Q&A

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

    8136 引用 • 37079 回帖 • 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 块内脚本

    <!-- 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

    安卓是不能外部引用吗?

    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 回复
  • towfd

    感谢 🙏

  • 查看全部回帖

推荐标签 标签

  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    944 引用 • 943 回帖
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 168 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 2 关注
  • golang

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

    497 引用 • 1387 回帖 • 284 关注
  • 以太坊

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

    34 引用 • 367 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖 • 1 关注
  • Scala

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

    13 引用 • 11 回帖 • 134 关注
  • flomo

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

    5 引用 • 107 回帖
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 125 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 351 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    286 引用 • 248 回帖 • 62 关注
  • HTML

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

    107 引用 • 295 回帖 • 1 关注
  • OAuth

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

    36 引用 • 103 回帖 • 10 关注
  • HBase

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

    17 引用 • 6 回帖 • 75 关注
  • WebComponents

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

    1 引用 • 2 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 1 关注
  • OpenStack

    OpenStack 是一个云操作系统,通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成,同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 5 关注
  • OpenResty

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

    17 引用 • 41 关注
  • 创造

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

    179 引用 • 995 回帖 • 1 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 214 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    944 引用 • 1459 回帖 • 16 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 384 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    287 引用 • 4484 回帖 • 669 关注
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    20 引用 • 7 回帖