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