67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
(function () {
|
|
|
|
Vue.component('ghetto-sound', {
|
|
template: '<button v-bind:class="[\'play\', { playing: playing }]" v-on:click="click">{{ asset.name }}</button>',
|
|
props: {
|
|
asset: Object,
|
|
},
|
|
data: function () {
|
|
return {
|
|
audio: null,
|
|
playing: false,
|
|
};
|
|
},
|
|
methods: {
|
|
click: function (event) {
|
|
if (this.playing) {
|
|
this.stop();
|
|
}
|
|
else {
|
|
this.play();
|
|
}
|
|
},
|
|
play: function () {
|
|
// Make sure the actual audio element exists.
|
|
if (!this.audio) {
|
|
this.audio = new Audio('audio/' + this.asset.resource);
|
|
}
|
|
|
|
// Emit an event so that other playing sounds can be stopped.
|
|
this.$emit('ghetto-playsound');
|
|
|
|
this.audio.load();
|
|
this.audio.play();
|
|
this.audio.onended = function () {
|
|
this.playing = false;
|
|
}.bind(this);
|
|
this.playing = true;
|
|
},
|
|
stop: function () {
|
|
if (this.audio) {
|
|
this.audio.pause();
|
|
this.playing = false;
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
GHETTO_SOURCE_REQUEST.then(function (source) {
|
|
var data = Object.assign({}, source, { ready: true });
|
|
var app = new Vue({
|
|
el: '#soundboard',
|
|
data: data,
|
|
methods: {
|
|
stopAllPlayingSounds: function () {
|
|
// Find all sounds currently playing and stop them.
|
|
this.$refs.sound.forEach(function (item) {
|
|
if (item.playing) {
|
|
item.stop();
|
|
}
|
|
});
|
|
},
|
|
}
|
|
});
|
|
});
|
|
|
|
})();
|