Vue Reactivity to Object Properties

by helloworld

HTML

<div id="app">
  <input 
    type="file"
    accept="audio/wav"
    @change="setFile($event)"
  />
  <button
    v-if="audio && audio.paused"
    @click="audio.play()"
  >Play</button>
  <button
    v-else
    @click="audio.pause()"
  >Pause</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      file: null,
      audio: null
    };
  },
  watch: {
    file() {
      this.initializeAudioPlayer();
    }
  },
  methods: {
    setFile($event) {
      this.file = $event.target.files[0];
    },
    initializeAudioPlayer() {
      this.audio = new Audio()
      if (this.file != null) {
        this.audio.src = URL.createObjectURL(this.file);
      }
    }
  },
});