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