Vue.js | Ses dosyalarını çalıştırma

Öncelikle, Vue.js projenizi oluşturduktan sonra App.vue dosyanızda aşağıdaki kodu kullanabilirsiniz:

<template>
<div id="app">
<h1>Vue.js ile Ses Dosyası Çalma</h1>
<button @click="playSound">Sesi Çal</button>
<audio ref="audio" :src="audioSource"></audio>
</div>
</template>

<script>
export default {
data() {
return {
audioSource: require('./assets/sound.mp3') // Ses dosyanızın yolunu buraya ekleyin
};
},
methods: {
playSound() {
this.$refs.audio.play();
}
}
};
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>

Açıklamalar:

  1. HTML Şablonu (Template):
    • h1 etiketi ile bir başlık ekledik.
    • button etiketi ile bir düğme oluşturduk ve @click direktifi ile playSound metodunu çağırdık.
    • audio etiketi ile ses dosyasını tanımladık. ref özelliği ile bu etikete audio referansını verdik ve :src özelliği ile ses dosyasının yolunu belirttik.
  2. JavaScript Bölümü (Script):
    • data fonksiyonu içinde audioSource adında bir veri tanımladık ve bu veriyi ses dosyasının yoluna atadık.
    • methods içinde playSound metodunu tanımladık. Bu metod, this.$refs.audio.play() ile audio elementini oynatır.
  3. Stil Bölümü (Style):
    • Basit bir stil tanımladık. #app id’si ile merkezi hizalama sağladık ve button stilini belirledik.

Ses Dosyasını Projeye Dahil Etme:

  • Ses dosyanızı src/assets/ klasörüne koyun.
  • require fonksiyonu ile ses dosyasını dahil edin. Bu örnekte audioSource: require('./assets/sound.mp3') şeklinde.

Bu kod, Vue.js projenizde bir düğmeye tıkladığınızda ses dosyasını çalacaktır. sound.mp3 dosyasını kendi ses dosyanızla değiştirerek kullanabilirsiniz.

About The Author

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir