Фреймворк Vue js, работа с аудио
Я создал визуальную новеллу в браузере на HTML, PHP, CSS, и JS с использованием фреймворка Vue js. Мне нужно сделать так, чтобы при смене сцены звук с предыдущей сцены прерывался, иначе в некоторых сценах звук накладывается с предыдущей сцены. Звук проигрывается с помощью mounted и new Audio. Спросите меня, зачем я маюсь этим ? Это мой дипломный проект. Тема "Как изобрести велосипед, в частности вместо движков по типу ренпая писать тысячи строк кода с нуля"
Фрагмент кода прилагаю, помогите пожалуйста:
<script>
new Vue({
el: '#app',
data: {
currentScene: 'StartScene'
},
components: {
StartScene: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/background.jpg" style="aspect-ratio: auto; width: 90%; height: 75%"></center>
<button @click="$parent.currentScene = 'Scene1a'">Текст</button>
</div>
`,
},
Scene1a: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/pic2.jpeg "></center>
<p class = "default">Текст</p>
<button v-if="currentStep >= 1" @click="$parent.currentScene = 'Scene1'">Текст</button>
</div>
`,
data() {
return {
currentStep: 0,
maxSteps: 1,
intervalId: null
}
},
mounted() {
new Audio('sound/day1.mp3').play();
this.intervalId = setInterval(() => {
if(this.currentStep < this.maxSteps) {
this.currentStep++;
} else {
clearInterval(this.intervalId);
}
}, 1000);
},
beforeDestroy() {
if(this.intervalId) clearInterval(this.intervalId);
}
},
Scene1: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/pic1.webp"></center>
<p class="mp">Текст</p>
<button @click="$parent.currentScene = 'Scene2'">Текст</button>
</div>
`,
mounted() {
new Audio('sound/bsound.mp3').play();
}
},
Scene2: {
template: `
<div class="scene">
<h2>Минное поле</h2>
<center><img src="img/pic3.jpg"></center>
<p class ="mp">Текст</p>
<button @click="$parent.currentScene = 'BadCompany'">Попытаться пройти напрямую</button>
<button @click="$parent.currentScene = 'Scene3'">Рискнуть обойти по краю</button>
</div>
`,
mounted() {
new Audio('sound/bsound.mp3').play();
}
},
а что-либо учить в рамки работы над проектом не входит?
new Vue({
el: '#app',
data: {
currentScene: 'StartScene',
currentAudio: null
},
methods: {
playSound(src) {
if (this.currentAudio) {
this.currentAudio.pause();
this.currentAudio.currentTime = 0;
}
const audio = new Audio(src);
audio.play();
this.currentAudio = audio;
}
},
components: {
StartScene: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/background.jpg" style="aspect-ratio: auto; width: 90%; height: 75%"></center>
<button @click="$parent.currentScene = 'Scene1a'">Текст</button>
</div>
`
},
Scene1a: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/pic2.jpeg"></center>
<p class="default">Текст</p>
<button v-if="currentStep >= 1" @click="$parent.currentScene = 'Scene1'">Текст</button>
</div>
`,
data() {
return {
currentStep: 0,
maxSteps: 1,
intervalId: null
};
},
mounted() {
this.$root.playSound('sound/day1.mp3');
this.intervalId = setInterval(() => {
if (this.currentStep < this.maxSteps) {
this.currentStep++;
} else {
clearInterval(this.intervalId);
}
}, 1000);
},
beforeDestroy() {
if (this.intervalId) clearInterval(this.intervalId);
}
},
Scene1: {
template: `
<div class="scene">
<h2>Текст</h2>
<center><img src="img/pic1.webp"></center>
<p class="mp">Текст</p>
<button @click="$parent.currentScene = 'Scene2'">Текст</button>
</div>
`,
mounted() {
this.$root.playSound('sound/bsound.mp3');
}
},
Scene2: {
template: `
<div class="scene">
<h2>Минное поле</h2>
<center><img src="img/pic3.jpg"></center>
<p class="mp">Текст</p>
<button @click="$parent.currentScene = 'BadCompany'">Попытаться пройти напрямую</button>
<button @click="$parent.currentScene = 'Scene3'">Рискнуть обойти по краю</button>
</div>
`,
mounted() {
this.$root.playSound('sound/bsound.mp3');
}
}
}
});