mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
7 lines
14 KiB
JavaScript
7 lines
14 KiB
JavaScript
import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/embed/audio/reader/","title":"Audio Reader 音频 | 指南","lang":"zh-CN","frontmatter":{"title":"Audio Reader 音频","icon":"rivet-icons:audio","createTime":"2024/12/24 22:31:01","permalink":"/guide/embed/audio/reader/","description":"概述 主题支持在文档中嵌入 音频阅读 。 该功能由 提供支持。 音频阅读 并不是一个音乐播放器,它仅是在内容中嵌入一个( )按钮,点击后播放一段音频。 它适合用于播放一些短时间的音频,比如 单词标音 。 配置 该功能默认不启用。你需要在主题配置中开启。 .vuepress/config.ts markdown 语法 音频嵌入 markdown 语法是一...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"Audio Reader 音频\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/embed/audio/reader/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"Audio Reader 音频"}],["meta",{"property":"og:description","content":"概述 主题支持在文档中嵌入 音频阅读 。 该功能由 提供支持。 音频阅读 并不是一个音乐播放器,它仅是在内容中嵌入一个( )按钮,点击后播放一段音频。 它适合用于播放一些短时间的音频,比如 单词标音 。 配置 该功能默认不启用。你需要在主题配置中开启。 .vuepress/config.ts markdown 语法 音频嵌入 markdown 语法是一..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/embed/audio/reader/"}]]},"readingTime":{"minutes":1.79,"words":538},"git":{"createdTime":1735057038000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"067d0e2264b10846ecbb0bead7389033008b62cc","time":1735057824000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"docs: update doc"},{"hash":"c276a77d4e788bd09e3936af9cbe7bddb2ba7697","time":1735057038000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add <code>audioReader</code> support (#398)"}]},"autoDesc":true,"filePathRelative":"guide/embed/audioReader.md","headers":[],"bulletin":false}`),u={name:`audioReader.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`};function m(c,l,u,m,h,g){let _=t(`VPLink`),v=t(`AudioReader`,!0),y=t(`VPIcon`);return n(),i(`div`,null,[l[12]||=s(`h2`,{id:`概述`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#概述`},[s(`span`,null,`概述`)])],-1),l[13]||=s(`p`,null,`主题支持在文档中嵌入 音频阅读 。`,-1),s(`p`,null,[l[1]||=a(`该功能由 `,-1),r(_,{href:`../../config/plugins/markdown-power.md`},{default:e(()=>[...l[0]||=[a(`vuepress-plugin-md-power`,-1)]]),_:1}),l[2]||=a(` 提供支持。`,-1)]),s(`p`,null,[l[3]||=s(`strong`,null,`音频阅读`,-1),l[4]||=a(` 并不是一个音乐播放器,它仅是在内容中嵌入一个( `,-1),r(v,{src:`https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio`}),l[5]||=a(` )按钮,点击后播放一段音频。`,-1)]),l[14]||=s(`p`,null,[a(`它适合用于播放一些短时间的音频,比如 `),s(`strong`,null,`单词标音`),a(` 。`)],-1),l[15]||=s(`h2`,{id:`配置`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#配置`},[s(`span`,null,`配置`)])],-1),l[16]||=s(`p`,null,`该功能默认不启用。你需要在主题配置中开启。`,-1),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(y,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[6]||=a(`.vuepress/config.ts`,-1)])]),l[7]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> audioReader</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[17]||=o(`<h2 id="markdown-语法" tabindex="-1"><a class="header-anchor" href="#markdown-语法"><span>markdown 语法</span></a></h2><p>音频嵌入 markdown 语法是一个 行内语法,因此你可以在 markdown 的任何地方中使用。</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">audioReader</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>添加配置项:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><strong>配置说明:</strong></p><ul><li><code>type</code>:音频类型,格式如:<code>audio/mpeg</code> , 默认根据音频链接地址的文件扩展名推断,如果链接地址中不包含扩展名,请手动声明。</li><li><code>title</code>: 音频标题,显示在音频图标之前。</li><li><code>autoplay</code>:是否自动播放,不建议启用。</li><li><code>start-time</code>:音频起始播放时间点,单位为 秒。</li><li><code>end-time</code>:音频结束播放时间点,单位为 秒。</li><li><code>volume</code>:音频播放音量,范围为 <code>0 ~ 1</code> 。</li></ul><h2 id="全局组件" tabindex="-1"><a class="header-anchor" href="#全局组件"><span>全局组件</span></a></h2><p>主题提供了全局组件 <code><AudioReader /></code> 以支持更灵活丰富的使用方式。</p><h3 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span>Props</span></a></h3><table><thead><tr><th>字段</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>src</td><td><code>string</code></td><td>必填,音频播放地址</td></tr><tr><td>type</td><td><code>string</code></td><td>选填,音频格式,默认从 <code>src</code> 中截取</td></tr><tr><td>autoplay</td><td><code>boolean</code></td><td>选填,是否自动播放,不建议启用</td></tr><tr><td>startTime</td><td><code>number</code></td><td>选填,音频起始播放时间点,单位为 秒</td></tr><tr><td>endTime</td><td><code>number</code></td><td>选填,音频结束播放时间点,单位为 秒</td></tr><tr><td>volume</td><td><code>number</code></td><td>选填,音频播放音量,范围为 <code>0 ~ 1</code></td></tr></tbody></table><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">audio 美 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ˈɔːdioʊ</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</span><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;"> @</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">audioReader</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/audio/audio.mp3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><strong>输出:</strong></p>`,15),s(`p`,null,[l[8]||=a(`audio 美 [ˈɔːdioʊ] `,-1),r(v,{src:`https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio`})]),l[18]||=o(`<p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">audio 美 @</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">audioReader title="[ˈɔːdioʊ]"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">/audio/audio.mp3</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><strong>输出:</strong></p>`,3),s(`p`,null,[l[9]||=a(`audio 美 `,-1),r(v,{src:`https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio`,title:[c.ˈɔːdioʊ]},null,8,[`title`])]),l[19]||=o(`<p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">audio 美 </span><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">AudioReader</span><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">/audio/audio.mp3</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">>[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">ˈɔːdioʊ</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">]</</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">AudioReader</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">></span></span></code></pre></div><p><strong>输出:</strong></p>`,3),s(`p`,null,[l[11]||=a(`audio 美 `,-1),r(v,{src:`https://sensearch.baidu.com/gettts?lan=en&spd=3&source=alading&text=audio`},{default:e(()=>[...l[10]||=[a(`[ˈɔːdioʊ]`,-1)]]),_:1})])])}var h=c(u,[[`render`,m]]);export{l as _pageData,h as default}; |