vime-audio

Enables loading, playing and controlling audio via the HTML5 <audio> element.

You don't interact with this component for passing player properties, controlling playback, listening to player events and so on, that is all done through the vime-player component.

Usage

HTML

<vime-player controls>

<vime-audio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

<!-- <source> and <track> elements are placed here. -->

</vime-audio>

<!-- ... -->

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeAudio } from '@vime/react';

function Example() {

return (

<VimePlayer controls>

<VimeAudio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

{/* <source> and <track> elements are placed here. */}

</VimeAudio>

{/* ... */}

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer controls>

<VimeAudio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

<!-- <source> and <track> elements are placed here. -->

</VimeAudio>

<!-- ... -->

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeAudio } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeAudio,

},

};

</script>

Svelte

example.svelte

<VimePlayer controls>

<VimeAudio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

<!-- <source> and <track> elements are placed here. -->

</VimeAudio>

<!-- ... -->

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeAudio } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player controls>

<vime-audio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

{/* <source> and <track> elements are placed here. */}

</vime-audio>

{/* ... */}

</vime-player>

);

}

}

Angular

example.html

<vime-player controls>

<vime-audio>

<source data-src="/media/audio.mp3" type="audio/mp3" />

<!-- <source> and <track> elements are placed here. -->

</vime-audio>

<!-- ... -->

</vime-player>

Properties

Property	Attribute	Description	Type	Default
crossOrigin	cross-origin	Whether to use CORS to fetch the related image. See MDN for more information.	"" ∣ "anonymous" ∣ "use-credentials" ∣ undefined	undefined
disableRemotePlayback	disable-remote-playback	EXPERIMENTAL: Whether to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc).	boolean ∣ undefined	undefined
mediaTitle	media-title	The title of the current media.	string ∣ undefined	undefined
preload	preload	Provides a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played. See MDN for more information.	"" ∣ "auto" ∣ "metadata" ∣ "none" ∣ undefined	'metadata'

Slots

Slot	Description
	Pass <source> and <track> elements to the underlying HTML5 media player.

Dependencies

Used by

• vime-playground

Depends on

• vime-file

Graph

graph TD;

vime-audio --> vime-file

vime-playground --> vime-audio

style vime-audio fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS