Build a Vue.js 3 Audio Waveform Canvas Editor to Play Audio Files in Browser Using TS

geekygautam1997 January 13, 2025No Comments

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useAVBars, useAVCircle, useAVWaveform } from 'vue-audio-visual'

const player = ref(null)
const canvas = ref(null)
import mySource from './assets/cut.mp3'

// composable function useAVBars
useAVWaveform(player, canvas, { src: mySource, canvHeight: 580, canvWidth: 800 })
</script>

<template>
  <div>
    <audio ref="player" :src="mySource" controls />
    <canvas ref="canvas" />
  </div>
</template>

import { ref } from 'vue'

import { useAVBars, useAVCircle, useAVWaveform } from 'vue-audio-visual'

const player = ref(null)

const canvas = ref(null)

import mySource from './assets/cut.mp3'

// composable function useAVBars

useAVWaveform(player, canvas, { src: mySource, canvHeight: 580, canvWidth: 800 })

</script>

<div>

</div>

</template>

geekygautam1997

View All Posts

Comments

No comments yet. Why don’t you start the discussion?

Build a Vue.js 3 Audio Waveform Canvas Editor to Play Audio Files in Browser Using TS

Comments

Leave a Reply Cancel reply

Archives