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

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

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

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

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

Screenshot20241101162557org.b3log.siyuan.jpg

  • 思源笔记

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

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

    22026 引用 • 87851 回帖 • 4 关注
  • Q&A

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

    7938 引用 • 36313 回帖 • 167 关注

相关帖子

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

    感谢 🙏

  • 其他回帖
  • 方法一,使用 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 回复
  • 查看全部回帖

推荐标签 标签

  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 1 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 615 关注
  • HHKB

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

    5 引用 • 74 回帖 • 465 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 726 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 237 关注
  • 思源笔记

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

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

    22026 引用 • 87851 回帖 • 4 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4600 回帖 • 701 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • Redis

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

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

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

    107 引用 • 295 回帖
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发,并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例: https://wide.b3log.org

    30 引用 • 218 回帖 • 626 关注
  • 七牛云

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

    26 引用 • 222 回帖 • 165 关注
  • TGIF

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

    287 引用 • 4484 回帖 • 668 关注
  • OpenStack

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

    10 引用 • 2 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 533 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 621 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 505 关注
  • 知乎

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

    10 引用 • 66 回帖 • 1 关注
  • Git

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

    209 引用 • 358 回帖
  • 黑曜石

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

    A second brain, for you, forever.

    14 引用 • 106 回帖 • 1 关注
  • 域名

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

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

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • Netty

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

    49 引用 • 33 回帖 • 19 关注
  • 微软

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

    8 引用 • 44 回帖 • 1 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    25 引用 • 83 回帖