AudioPlayer

Embed audios in Markdown files.

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

pnpm

pnpm add -D plyr

yarn

yarn add -D plyr

npm

npm i -D plyr

Tips

We recommend you to use VidStack for better experience.

Demo

An audio player

An audio

<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