Ö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:
- HTML Şablonu (Template):
h1
etiketi ile bir başlık ekledik.button
etiketi ile bir düğme oluşturduk ve@click
direktifi ileplaySound
metodunu çağırdık.audio
etiketi ile ses dosyasını tanımladık.ref
özelliği ile bu etiketeaudio
referansını verdik ve:src
özelliği ile ses dosyasının yolunu belirttik.
- JavaScript Bölümü (Script):
data
fonksiyonu içindeaudioSource
adında bir veri tanımladık ve bu veriyi ses dosyasının yoluna atadık.methods
içindeplaySound
metodunu tanımladık. Bu metod,this.$refs.audio.play()
ileaudio
elementini oynatır.
- Stil Bölümü (Style):
- Basit bir stil tanımladık.
#app
id’si ile merkezi hizalama sağladık vebutton
stilini belirledik.
- Basit bir stil tanımladık.
Ses Dosyasını Projeye Dahil Etme:
- Ses dosyanızı
src/assets/
klasörüne koyun. require
fonksiyonu ile ses dosyasını dahil edin. Bu örnekteaudioSource: 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.