在学外语，做笔记梳理时，想给句子加上音频，已经有句子文本和音频文件名的对应文本，怎么能快速将句子设置为音频的锚文本，并点击锚文本即播放呢？
直接插入音频后，会直接显示音频控件，占据的位置太大了，而且也没找到在哪里设置锚文本。
通过超链接设置句子为锚文本后，点击文本会在另一个标签弹出音频控件，然后再点击才能播放，而且要一句一句去设置填写，也比较麻烦。
想问问有没有能直接通过某种格式把我的句子和音频直接转换成点击即播放的形式吗？
本贴最后更新于 415 天前，其中的信息可能已经天翻地覆
相关帖子
被采纳的回答
-
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(); }); } })();效果
请输入回帖内容
...
-
方法一，使用 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(); }); } })();效果
2 回复 -
安卓是不能外部引用吗？
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 回复
请输入回帖内容
...