Skip to main content

AudioPlayer

Less than 1 minute

Embed audios in Markdown files.

Install plyr package in your project first to use this component:

pnpm
pnpm add -D plyr

Tips

We recommend you to use VidStack for better experience.

Demo

An audio player
<AudioPlayer src="//theme-hope-assets.vuejs.press/files/sample.mp3" />
An audio player with poster and title
A Sample Audio
A Sample Audio
<AudioPlayer
  src="//theme-hope-assets.vuejs.press/files/sample.mp3"
  title="A Sample Audio"
  poster="//theme-hope-assets.vuejs.press/logo.svg"
/>

Props

src

  • Type: string
  • Required: Yes

Audio source link

width

  • Type: string | number
  • Default: 100%

Audio component width.

type

  • Type: string
  • Required: No

Audio type.

Note

If your server cannot return a correct mime type for your audio files, you should specify it. (e.g.: audio/mp3)

title

  • Type: string
  • Required: No

Audio title

poster

  • Type: string
  • Required: No

Audio poster