Photo by Thomas Le on Unsplash

REACT SAMPLES

React Audio Samples

React Audio dış sesi yakalamak, kaydetmek veya kaydedilmiş bir ses dosyasını çalma ile ilgili örnekleri içerir

Ses dosyalarını farklı nedenler ile kaydetme ihtiyacı duyabilirsiniz. Bu kaydettiğiniz ses dosyasını başka insanlar ile paylaşma veya Speech To Text API bu ses dosyalarını vererek bunları metin dosyasına dönüştürmek isteyebilirsiniz.

1. Audio Recording

İlk örneğimiz Ses dosyalarının kaydedilmesi ve bu kaydedilen dosyaların tekrar oynatılması ile ilgili olacak.

Aşağıdaki örnekte GetMicrophone ile media yetkilerini almaya çalışacağız

https://onurdayibasi.dev/audio-recording

Aşağıdaki örnekte audio veya video araçları için izin istiyoruz. Bu izinler sırasında https yani secure bir altyapı adresten bu servisleri sunduğunuza emin olun. https konusu bu media izinlerinin alınmasında önem arzeder. (Not: Localde çalışırken bu tarz bir gereksinim bulunmuyor)

 const getMicrophonePermission = async () => {
    if ('MediaRecorder' in window) {
      try {
        const streamData = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: false,
        });
        setPermission(true);
        setStream(streamData);
      } catch (err) {
        alert(err.message);
      }
    } else {
      alert('The MediaRecorder API is not supported in your browser.');
    }
  };

Sonrasında düğmenin durumu Recording düğmesi haline gelir. Record düğmesine basıldığında

  const startRecording = async () => {
    setRecordingStatus('recording');
    //create new Media recorder instance using the stream
    const media = new MediaRecorder(stream, {type: mimeType});
    //set the MediaRecorder instance to the mediaRecorder ref
    mediaRecorder.current = media;
    //invokes the start method to start the recording process
    mediaRecorder.current.start();
    let localAudioChunks = [];
    mediaRecorder.current.ondataavailable = (event) => {
      if (typeof event.data === 'undefined') return;
      if (event.data.size === 0) return;
      localAudioChunks.push(event.data);
    };
    setAudioChunks(localAudioChunks);
  };

Ses dosyalarını kaydetmeye başlarız. Stop Recording ile kaydetme işlemi tamamlanır.

  const stopRecording = () => {
    setRecordingStatus('inactive');
    //stops the recording instance
    mediaRecorder.current.stop();
    mediaRecorder.current.onstop = () => {
      //creates a blob file from the audiochunks data
      const audioBlob = new Blob(audioChunks, {type: mimeType});
      //creates a playable URL from the blob file.
      const audioUrl = URL.createObjectURL(audioBlob);
      setAudio(audioUrl);
      setAudioChunks([]);
    };
  };

Bundan sonra elimizde bir stream ses dosyası bulunuyor. Bunu ister oynatabilir, ister kaydedebilirsiniz.

<audio src={audio} controls></audio>
<a download href={audio}>
              Download Recording
            </a>

Yukarıdaki örnekte kaydedilen ses dosyasını backend stream yaparak gönderebilirsiniz. Bunu paylaşmayı veya AWS, MS veya Google gibi Cloud Provider AI SDK kullanarak Speech To Text (Sesden metine) dönüştürebilirsiniz.

Bu yapıları daha basit şekilde çözebilmeniz için hazır SDK’lar da bulunur.

2. Microsoft Cognitive Services Speech SDK for JavaScript

JavaScript için Microsoft Cognitive Services Speech SDK, Microsoft Cognitive Services Speech SDK’ında ses dosyalarını bu API üzerinden hiç backend uğramadan Speech To Text işlemi gerçekleştirebilirsiniz.

İlk önce SDK aktif hale getirelim.

  useEffect(() => {
    const createRecognizer = async () => {
      const tokenObj = await getTokenOrRefresh();
      const speechConfig = speechsdk.SpeechConfig.fromAuthorizationToken(
        tokenObj.authToken,
        tokenObj.region
      );
      speechConfig.speechRecognitionLanguage = 'en-US';

      const audioConfig = speechsdk.AudioConfig.fromDefaultMicrophoneInput();
      const recognizer = new speechsdk.SpeechRecognizer(speechConfig, audioConfig);

      recognizerRef.current = recognizer;

      recognizer.recognizing = (_, e) => {
        const newMessage = bufferSpeechParts(speechParts, e.result);
        setNewMessage(newMessage);
      };
    };
    createRecognizer();

    return () => {
      if (recognizerRef.current) recognizerRef.current.close();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

Burada Speech to Text işlemi recognizer.recognizing işlemi sırasında gerçekleşecektir.

recognizer.recognizing = (_, e) => {
        const newMessage = bufferSpeechParts(speechParts, e.result);
        setNewMessage(newMessage);
      };

Recording başlatmak için

  const startRecording = async () => {
    setIsRecording(true);
    recognizerRef.current?.startContinuousRecognitionAsync();
  };

Recording stop etmek için

  const stopRecording = async () => {
    setIsRecording(false);
    recognizerRef.current?.stopContinuousRecognitionAsync();
    speechParts.length = 0;
  };

bu kodları gerçekleştiriyoruz. Artık kodu backend aktarıp, buradan Speech To Text yapıp sonuçlarını stream etmek yerine direk olarak Microsoft Cognitive Services Speech üzerinden işlemlerimizi gerçekleştirmiş olduk.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.