Audio Waves Player

A simple Vue.js component to show and audio player with waves and better styles in your web app, it creates the audio form or audio waves like the WhatsApp voice note/audio player.

Install

npm i audio-waves-player

Usage

Import and add to your components section

import AudioWavesPlayer from "audio-waves-player"

export default {
    components: {
        AudioWavesPlayer
    },
    methods: {
        logEvent(evt) {
            console.log(evt)
        }
    }
}

Use in your HTML section:

<audio-waves-player src="audio.mp3" @event="logEvent" @error="logEvent"></audio-waves-player>

Nuxt

This component does not work in SSR, to use it in Nuxt it is necessary to create a new file named audio-waves-player.client.js in your plugins folder:

// plugins/audio-waves-player.client.js
import Vue from "vue";
import AudioWavesPlayer from 'audio-waves-player'

Vue.use(AudioWavesPlayer)

Add the plugin to your plugins array in nuxt.config.js file:

// nuxt.config.js
plugins: [
    '~/plugins/audio-waves-player.client.js'
]

Props

Available props to customize the component.

Name	Description	Required	Default
src	Audio file path, it can be an URL o a local path	true	null
width	Sets a custom width to the container (can receive px, %, em, vw)	false	100%
height	Sets a custom height to the container (can receive px, %, em, vh)	false	60vh

Events

Events triggered by the component.

@event

Receives events triggered by the calendly embed, options are:

Event name	Description
calendly.profile_page_viewed	Profile page was viewed
calendly.event_type_viewed	Event type page was viewed
calendly.date_and_time_selected	Invitee selected date and time
calendly.event_scheduled	Invitee successfully booked a meeting

You can check the official events documentation here

@error

Receives errors generated by the calendly widget to allow you debug some errors.

---

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Tutorial followed to create this package Here