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