Audio component in Javascript with Vue3

Question

I am trying to make a component in Vue3 to manage audio. This component will display a button that when pressed, plays an audio (just a short word) and changes the color (to show it is playing the audio).

Currently I managed to play the audio, but I have some issues that I am not sure how to resolve, which arise because I don't really understand how the Audio object works in javascript:

The class .playing is never applied to the element (isPlaying always returns false!)
How can I check the audio gets loaded before playing it? In case the URL is not reachable the .play() call should not be executed. But I am not sure canplaythrough event will work for me, since I just want to load the audio once (and only if the user presses the button).
What is the proper way of managing events for new Audio()? Try catch or I can do something with promises?
How to unmount this component correctly? this.audio.pause(); this.audio.src = null?

<template>
<button v-on:click="play" :class="{playing: isPlaying}">Audio</button>
</template>
<script>
export default {
    name: 'AudioComponent',
    data() {
        return {
            audio: null,
        }
    },
    props: {
        url: {type: String, required: true}
    },
    computed: {
        isPlaying(){
            if(this.audio !== null){
                if(!this.audio.paused && this.audio.duration > 0){
                    return true;
                }
            }
            return false;
        }
    },
    methods: {
        play(){
            if(this.audio === null){
                this.audio = new Audio(this.url);
            }
            this.audio.play();
        }
    }
}
</script>
<style scoped>
.playing {
    color: green;
}
</style>

Note that this is a simplification of the code, but should be enough to see the issue. Since I couldn't find many examples using new Audio call I am wondering if I should use the DOM calls directly instead.

Note that I am using the options API but don't mind answers with composition API too.

Thanks for noticing, it was defined but lost when porting the code to stackoverflow. — lpares12
– lpares12, Commented Sep 5, 2022 at 18:41

KaKi87 · Accepted Answer · 2022-09-06 09:27:38Z

1

+50

this.audio properties are not reactive, so HTMLMediaElement events play and pause must be used.
Yes, using the canplay event.
You can listen for the error event as well, if that's your question.
I don't think you need to do anything in particular.

Demo

{
    props: {
        url: {
            type: String,
            default: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3'
        }
    },
    data: () => ({
        audio: null,
        canPlay: false,
        isPlaying: false
    }),
    methods: {
        play: async function(){
            this.audio.play();
        }
    },
    mounted: function(){
        this.audio = new Audio(this.url);
        this.audio.addEventListener('canplay', () => this.canPlay = true, { once: true });
        this.audio.addEventListener('play', () => this.isPlaying = true);
        this.audio.addEventListener('pause', () => this.isPlaying = false);
        this.$watch(() => this.audio.duration, () => console.log(this.audio.paused));
    },
    template: `
        <button
            :class="{ playing: isPlaying }"
            :disabled="!canPlay"
            @click="play"
        >Audio</button>
    `
}

answered Sep 6, 2022 at 9:27

KaKi87

9557 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lpares12 Over a year ago

Thanks, this is more or less what I was looking for. One quick addition, if it is needed to check for errors (like network error, or file not found) another event listener can be added: this.audio.addEventListener('error', () => console.error('could not load audio file'));

KaKi87 Over a year ago

You're welcome. Just like I said in reply to question no. 3, yes.

Collectives™ on Stack Overflow

Audio component in Javascript with Vue3

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related