vuepress-theme-plume/docs/en/guide/embed/audioReader.md

title, icon, createTime, permalink

title	icon	createTime	permalink
Audio Reader	rivet-icons:audio	2025/10/08 22:31:01	/en/guide/embed/audio/reader/

Overview

The theme supports embedding audio reading capabilities in documentation.

This feature is powered by vuepress-plugin-md-power.

Audio Reader is not a music player; it simply embeds an (@audioReader) button within content that plays an audio clip when clicked.

It is suitable for playing short audio clips, such as word pronunciation guides.

Configuration

This feature is disabled by default. You need to enable it in the theme configuration.

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      audioReader: true, // [!code ++]
    },
  })
})

Markdown Syntax

The audio embedding markdown syntax is an inline syntax, allowing usage anywhere within markdown.

@[audioReader](src)

With configuration options:

@[audioReader type="audio/mpeg" title="title" autoplay start-time="0" end-time="10" volume="0.7"](src)

Parameter Description:

• type: Audio type, formatted as audio/mpeg. Defaults to inference from the file extension in the audio URL. If the URL lacks an extension, declare manually.
• title: Audio title, displayed before the audio icon.
• autoplay: Whether to enable autoplay (not recommended).
• start-time: Audio playback start time in seconds.
• end-time: Audio playback end time in seconds.
• volume: Audio playback volume, range from 0 ~ 1.

Global Component

The theme provides a global component <AudioReader /> to support more flexible and comprehensive usage.

Props

Field	Type	Description
src	string	Required, audio source URL
type	string	Optional, audio format, parsed from src by default
autoplay	boolean	Optional, whether to enable autoplay (not recommended)
startTime	number	Optional, audio playback start time in seconds
endTime	number	Optional, audio playback end time in seconds
volume	number	Optional, audio playback volume, range from 0 ~ 1

Examples

Input:

audio 美 [ˈɔːdioʊ] @[audioReader](/audio/audio.mp3)

Output:

audio 美 [ˈɔːdioʊ] @audioReader

Input:

audio 美 @[audioReader title="[ˈɔːdioʊ]"](/audio/audio.mp3)

Output:

audio 美 @audioReader title="[ˈɔːdioʊ]"

Input:

audio 美 <AudioReader src="/audio/audio.mp3">[ˈɔːdioʊ]</AudioReader>

Output:

audio 美 [ˈɔːdioʊ]