Teachable Machine 오디오 프로젝트 - 특정 음악이 몇초간 지속되는지 확인

목차

 

1. 시작하기

Teachable Machine은 누구나 머신러닝 모델을 쉽고 빠르고 간단하게 만들 수 있도록 제작된 웹 기반 도구입니다.

 

Teachable Machine의 사이트 주소입니다.

https://teachablemachine.withgoogle.com/

Teachable Machine

 

이번에는 오디오 프로젝트로 클래식 음악과 전자 음악을 학습시키고 전자 음악이 몇 초 동안 지속되는지 알려주는 웹을 만들어보겠습니다.

시작하기를 누른 후 오디오 프로젝트를 선택합니다.

 

 

2. 샘플 수집

배경 소음에는 아무 일도 발생하지 않았을 때 기본 배경 소리를 20초 이상 녹음해줍니다.

 

 

클래스 이름을 Classic으로 바꾸고 클래식 음악을 들려주겠습니다.

 

 

클래스를 하나 추가해 이름을 Electronic으로 바꾼 후 마찬가지로 전자 음악을 들려주겠습니다.

 

 

3. 모델 학습시키기

학습에서 모델 학습시키기를 눌러 모델을 학습시킵니다.

 

 

잠시 기다리다가 학습이 완료되면 미리보기에서 모델이 분류를 잘하는지 확인합니다.

이제 모델이 완성되었습니다.

 

 

음악에 따라 조금씩 다른 것 같아서 다양한 노래를 들려주면 더 분류를 잘할 것 같습니다.

 

4. 내보내기

미리보기에서 모델 내보내기를 누르고 Tensorflow.js 탭에서 모델 업로드를 누릅니다.

모델이 업로드되면 Javascript 탭에서 복사를 누릅니다.

 

 

컴퓨터에서 html 파일을 하나 만들고 복사한 내용을 붙여 넣습니다.

 

 

브라우저에서 열어 확인을 한번 해봅시다.

 

 

이제 코드를 살짝 추가해 전자 음악이 몇 초동안 지속되는지 확인을 해볼 것입니다.

 

5. 코드

맨 밑에 전체 코드 있습니다.

 

4, 5 - html 부분에 p 태그를 2개 추가합니다.

첫 번째 p 태그는 현재 어떤 상태이지 알려주고 두 번째 p 태그는 전자 음악이 몇 초 지속되었는지 알려줍니다.

 

 

16 - 현재 어떤 상태인지 저장하는 변수 status를 만들고

17, 18 - p들을 갖고 옵니다.

 

 

listen() 안에

56, 57 - 현재 상태인 status에 클래식 음악이 80% 이상이면 클래식,

58, 59 - 전자 음악이 80% 이상이면 전자 음악,

60, 61 - 그 외는 배경 소음으로 저장해줍니다.

64 - current의 값을 변경합니다.

 

 

76 - timer 함수를 만들어 주고

 

 

43 - init() 안에다가 timer()를 호출합니다.

 

 

이제 창을 열어 전자 음악을 들려주면 초가 올라가고

클래식 음악을 들려주거나 음악을 들려주지 않으면 0초로 초기화가 됩니다.

 

 

전체 코드입니다.

HTML

<div>Teachable Machine Audio Model</div>
<button type="button" onclick="init()">Start</button>
<div id="label-container"></div>
<p></p>
<p></p>

JavaScript

const URL = "https://teachablemachine.withgoogle.com/models/110EchQcO/";

    let status = "배경 소음";
    let current = document.getElementsByTagName("p")[0];    // 현재 음악
    let electronic = document.getElementsByTagName("p")[1]; // 전자 음악이 몇 초동안 지속되었는지

    async function createModel() {
        const checkpointURL = URL + "model.json"; // model topology
        const metadataURL = URL + "metadata.json"; // model metadata

        const recognizer = speechCommands.create(
            "BROWSER_FFT", // fourier transform type, not useful to change
            undefined, // speech commands vocabulary feature, not useful for your models
            checkpointURL,
            metadataURL);

        // check that model and metadata are loaded via HTTPS requests.
        await recognizer.ensureModelLoaded();

        return recognizer;
    }

    async function init() {
        const recognizer = await createModel();
        const classLabels = recognizer.wordLabels(); // get class labels
        const labelContainer = document.getElementById("label-container");
        for (let i = 0; i < classLabels.length; i++) {
            labelContainer.appendChild(document.createElement("div"));
        }
        timer();

        // listen() takes two arguments:
        // 1. A callback function that is invoked anytime a word is recognized.
        // 2. A configuration object with adjustable fields
        recognizer.listen(result => {
            const scores = result.scores; // probability of prediction for each class
            // render the probability scores per class
            for (let i = 0; i < classLabels.length; i++) {
                const classPrediction = classLabels[i] + ": " + result.scores[i].toFixed(2);
                labelContainer.childNodes[i].innerHTML = classPrediction;
            }

            if(0.8 <= result.scores[0]) {           // 클래식 음악
                status = classLabels[0];
            } else if(0.8 <= result.scores[1]) {    // 전자 음악
                status = classLabels[1];
            } else {                                // 배경 소음
                status = classLabels[2];
            }

            current.innerHTML = "현재 : " + status;
        }, {
            includeSpectrogram: true, // in case listen should return result.spectrogram
            probabilityThreshold: 0.75,
            invokeCallbackOnNoiseAndUnknown: true,
            overlapFactor: 0.50 // probably want between 0.5 and 0.75. More info in README
        });

        // Stop the recognition in 5 seconds.
        // setTimeout(() => recognizer.stopListening(), 5000);
    }

    function timer() {
        let second = 0;

        let time = setInterval(function() {
            if(status == "Electronic") {    // 현재 상태가 Electronic 이라면
                second++;            
            } else {
                second = 0;
            }

            electronic.innerHTML = "전자 음악이 지속된 시간 : " + second + "초";
        }, 1000);
    }

 

 

 

참고

FAQ - https://teachablemachine.withgoogle.com/faq

Tutorials - https://www.youtube.com/playlist?list=PLJfHZtseuscuTQfodmFnbZ3rBgCWsRT9t

예제 - https://medium.com/@warronbebster/teachable-machine-tutorial-bananameter-4bfffa765866

 

이미지 프로젝트 (가위바위보 판별) - https://howbeautifulworld.tistory.com/41