62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
const 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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
new Vue({
|
|
el: '#root',
|
|
data: {
|
|
name: 'coco'
|
|
},
|
|
components: { ppbut }
|
|
|
|
})
|
|
|