HTML ve JavaScript kullanarak ses kaydı almak ve kaydetmek için, Web Audio API ve MediaRecorder API’yı kullanabilirsiniz. Bu kütüphaneler, javascript’in içerisinde varsayılan olarak vardır. Sayfaya tekrardan dahil etmeye gerek yoktur. Bu kütüphaneyi kullanarak ses kayıt etme işlemini ve kayıt edilen ses dosyasının oynatılması ile indirilmesini sağlayabilirsiniz.
Javascript İle Ses Kaydını Alma Ve Oynatma
Javascript ile ses kaydını ama ve oynatma işlemini sağlamak için Audio API ve MediaRecorder API’si kullanılmaktadır. Aynı zamanda kayıt edilen ses dosyasınıda indirebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ses Kaydı Alma ve Kaydetme Uygulaması</title>
</head>
<body>
<h1>Ses Kaydı Alma ve Kaydetme Uygulaması</h1>
<button id="start-recording">Kaydı Başlat</button>
<button id="stop-recording">Kaydı Durdur</button>
<button id="save-recording">Kaydı Kaydet</button>
<script>
let audioStream = null;
let mediaRecorder = null;
let audioChunks = [];
const startRecording = () => {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
audioStream = stream;
mediaRecorder = new MediaRecorder(audioStream);
mediaRecorder.start();
mediaRecorder.addEventListener('dataavailable', event => {
audioChunks.push(event.data);
});
})
.catch(error => console.log(error));
};
const stopRecording = () => {
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
mediaRecorder.stop();
audioStream.getTracks().forEach(track => track.stop());
}
};
const saveRecording = () => {
if (audioChunks.length > 0) {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
const audioElement = document.createElement('audio');
audioElement.src = audioUrl;
audioElement.controls = true;
document.body.appendChild(audioElement);
const downloadLink = document.createElement('a');
downloadLink.href = audioUrl;
downloadLink.download = 'recording.wav';
downloadLink.innerHTML = 'Ses Kaydını İndir';
document.body.appendChild(downloadLink);
audioChunks = [];
}
};
document.getElementById('start-recording').addEventListener('click', startRecording);
document.getElementById('stop-recording').addEventListener('click', stopRecording);
document.getElementById('save-recording').addEventListener('click', saveRecording);
</script>
</body>
</html>
Yukarıda yazmış olduğumuz kodlarda üç adet buton bulunmaktadır. Bunlar, “Kaydı Başlat”, “Kaydı Durdur” ve “Kaydı Kaydet” butonlarıdır. Bu butonlarla birlikte Javascript Ses Kaydı işlemini sağlamış oluyoruz.
“Kaydı Başlat” düğmesine tıklandığında, getUserMedia yöntemi kullanılarak tarayıcıdan bir ses akışı alınır ve MediaRecorder nesnesi ile kaydedilir. Kaydı durdurmak içinde “Kaydı Durdur” butonu kullanılmaktadır. Kaydedilen ses verisi, dataavailable olayıyla alınır ve Blob olarak saklanır.
“Kaydı Kaydet” butonuna tıklandığında, kaydedilen ses Blob‘u bir URL’ye dönüştürülür ve audio öğesi oluşturulur. Oluşturulan indirme bağlantısıyla birlikte, kayıt edilen ses dosyasını indirebilirsiniz.
Not: Bu kodlar sadece modern tarayıcılarda çalışır ve tarayıcınızın mikrofon erişimine izin vermesi gerekir.
