jm_p_op

django 기능 - 음성 인식 본문

팀/대신러닝

django 기능 - 음성 인식

jm_p_op 2023. 5. 24. 21:28

기능의 목적(사용처) - 검색시 음성을 인식하여 글을 적지 않고 넣기

코드 연결방법

  • rawgit에서 기본 함수 받아오기(js파일)

html

<body>
    <div id="controls">
        <button id="recordButton">Record</button>
    </div>


    <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
    <script src="../static/js/record.js"></script>
</body>

 

 

  • 버튼 눌를때마다 녹음/녹음종료가 되도록 만들기

js

URL = window.URL || window.webkitURL;

recordStatus = true
var gumStream;              //stream from getUserMedia()
var rec;                    //Recorder.js object
var input;                  //MediaStreamAudioSourceNode we'll be recording

// shim for AudioContext when it's not avb.
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext //new audio context to help us record

var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");

//add events to those 2 buttons
recordButton.addEventListener("click", boolRecord);

function boolRecord() {
    if (recordStatus) {
        recordStatus = false
        startRecording()
    } else {
        recordStatus = true
        stopRecording()
    }
}

 

 

  • 녹음시작하기
function startRecording() {
    console.log("recordButton clicked");

    // Disable the record button until we get a success or fail from getUserMedia()
    recordButton.disabled = false;

    navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function (stream) {
        console.log("getUserMedia() success, stream created, initializing Recorder.js ...");

        audioContext = new AudioContext({ sampleRate: 16000 });

        // assign to gumStream for later use
        gumStream = stream;

        // use the stream
        input = audioContext.createMediaStreamSource(stream);

        // Create the Recorder object and configure to record mono sound (1 channel) Recording 2 channels will double the file size
        rec = new Recorder(input, { numChannels: 1 })

        //start the recording process
        rec.record()

        console.log("Recording started");

    }).catch(function (err) {
        //enable the record button if getUserMedia() fails
        recordButton.disabled = false;
    });
}
  • 녹음 종료
function stopRecording() {
    console.log("stopButton clicked");

    //disable the stop button, enable the record too allow for new recordings
    recordButton.disabled = false;

    //tell the recorder to stop the recording
    rec.stop(); //stop microphone access
    gumStream.getAudioTracks()[0].stop();

    //create the wav blob and pass it on to createDownloadLink
    rec.exportWAV(createDownloadLink);
}
  • 종료 후 django로 보내기 (blob file을 formdata로 보내기)
  • recordlist 주석 해제 시 녹음한 파일 듣고 저장가능
async function createDownloadLink(blob) {
    var url = URL.createObjectURL(blob);
    var au = document.createElement('audio');
    var li = document.createElement('li');
    var link = document.createElement('a');

    //name of .wav file to use during upload and download (without extension)
    var filename = new Date().toISOString();

    //add controls to the <audio> element
    au.controls = true;
    au.src = url;

    //save to disk link
    link.href = url;
    link.download = filename + ".wav"; //download forces the browser to download the file using the  filename
    link.innerHTML = "Save to disk";

    //add the new audio element to li
    li.appendChild(au);

    //add the filename to the li
    li.appendChild(document.createTextNode(filename + ".wav "))

    //add the save to disk link to li
    li.appendChild(link);


    //blob
    let token = localStorage.getItem("access")
    const formdata = new FormData();
    formdata.append("blob", blob)
    const response = await fetch(`http://127.0.0.1:8000/sound/`, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${token}`
        },
        body: formdata
    })


    //add the li element to the ol
    //recordingsList.appendChild(li);


}

 

  • 장고에서 받고 음성인식 하기
  • cmd:pip install speechRecognition

views.py

class SoundAI (APIView):
    def post(self, request):
        audios=request.data['blob']
        Recognizer = sr.Recognizer()  # 인스턴스 생성
        mic = sr.AudioFile(audios)
        with mic as source:  # 안녕~이라고 말하면
            audio = Recognizer.listen(source)
        try:
            data = Recognizer.recognize_google(audio, language="ko")
        except:
            data=""

        print(data)  # 안녕 출력
        return Response({"message":data}, status=status.HTTP_200_OK)
  • 음성 인식 된것 html에서 받기

js

    const data = await response.json()
    console.log(data)

    console.log(response["message"])
저작자표시

'팀 > 대신러닝' 카테고리의 다른 글

django 대신러닝 기능 - json형식 dictionary_data 열기,저장  (0) 2023.05.31
django 대신러닝 기능- scheduler(2)(특정시간에 처리하기)  (0) 2023.05.31
django 대신러닝 기능- scheduler(주기적반복)  (0) 2023.05.24
'팀/대신러닝' Related Articles more