@voicexpress/players

v1.1.6

Published

3 months ago

Vue 3 audio players for VoiceXpress platform

0High
0Medium
0Low

voicexpress

vue vue3 audio player voicexpress text-to-speech tts component

VoiceXpress Players

Vue 3 audio players component for the VoiceXpress platform.

VoiceXpress Players Screenshot

Installation

npm install @voicexpress/players

Browser Usage (CDN)

You can use VoiceXpress Players directly in the browser without any build process:

<!DOCTYPE html>
<html>
<head>
    <title>VoiceXpress Player</title>
    <!-- Vue 3 CDN -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- VoiceXpress Players CDN -->
    <script src="https://unpkg.com/@voicexpress/players@latest/dist/voicexpress-players.umd.min.js"></script>
</head>
<body>
    <div id="app">
        <voice-xpress-player 
            src="https://your-audio-url.mp3" 
            theme="dark">
        </voice-xpress-player>
    </div>

    <script>
        const { createApp } = Vue;
        createApp({}).use(VoiceXpressPlayers).mount('#app');
    </script>
</body>
</html>

📋 Complete Example: Check example-browser.html for a full working demo with all themes!

NPM Usage

As a Vue Plugin

import { createApp } from 'vue'
import VoiceXpressPlayers from '@voicexpress/players'
import App from './App.vue'

const app = createApp(App)
app.use(VoiceXpressPlayers)
app.mount('#app')

As a Component

import { VoiceXpressPlayer } from '@voicexpress/players'

export default {
  components: {
    VoiceXpressPlayer
  }
}

In Template

<template>
  <div>
    <VoiceXpressPlayer 
      src="https://your-audio-url.mp3"
      theme="dark"
    />
  </div>
</template>

<script>
export default {
  // No need to create audio element manually
  // Just pass the audio URL as src prop
}
</script>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | String | null | Audio URL to play | | theme | String | 'light' | Player theme ('light', 'dark', 'gray', 'red', 'green', 'blue') |

Themes

Available themes:

light - Light theme with white background
dark - Dark theme with black background
gray - Gray theme
red - Red themed player
green - Green themed player
blue - Blue themed player

Features

✅ Play/Pause controls
✅ Progress bar with click-to-seek
✅ Time display (current/total)
✅ Download button
✅ Multiple themes
✅ Responsive design
✅ Vue 3 composition API ready

Development

# Install dependencies
npm install

# Serve development version
npm run serve

# Build library
npm run build

# Build demo
npm run build:demo

# Lint files
npm run lint

License

Support

Website: https://voicexpress.app
Issues: GitHub Issues