Vue.component('ppbut' ,{
  template : `
    <div>
    <button
      class="ppbut"
      v-bind:class="{ playing: isPlaying }"
      v-on:click="pp">
    </button>
    <audio ref="audioElm" preload="none">
      <source v-bind:src="audiourl">
    </audio>
    </div>
  `,
  data () {
    return {
      isPlaying : false
    }
  },
  props: ['audiourl'],
  methods: {
    pp (e) {
      if (!this.isPlaying) {
        this.mutePage();
        this.isPlaying = !this.isPlaying;
        this.$refs.audioElm.load();
        this.$refs.audioElm.play();
        this.$refs.audioElm.addEventListener("ended",
          function() {
            this.isPlaying = false;
            console.log(this.isPlaying);
            alert("The audio has ended");
        });

      } else {
        this.isPlaying = !this.isPlaying;
        this.$refs.audioElm.pause();
      }
    },
    mutePage () {
      var x = document.getElementsByTagName("audio");
      var i;
      for (i = 0; i < x.length; i++) {
          x[i].pause();
      }
      var y = document.getElementsByClassName("ppbut");
      for (i = 0; i < y.length; i++) {
        y[i].classList.remove("playing");
      }
    }
  }
})

let vm = new Vue({
  data () {
    return {
      name: 'coco'  
    }
  }
}).$mount('#root')