JSFiddle - React, Tailwind, and code Playground

HTML

<script type="module">
    import { createApp } from 'https://unpkg.com/vue@3.2.11/dist/vue.esm-browser.js';
    const app = createApp({
    		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);
        },
        template: `
            <button
            	:class="{ playing: isPlaying }"
              :disabled="!canPlay"
            	@click="play"
            >Audio</button>
        `
    });
    document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script>
<body class="app"></body>

CSS

.playing {
  color: green;
}