기초 지식 13 / 21

효과음과 읽어 주기: 소리

소리 파일이 없어도 프로그램이 직접 '삐—' 소리와 멜로디를 만들고, 글자를 소리 내 읽어 줘요.

브라우저 안에는 작은 악기가 들어 있어요. '이 높이로, 이만큼 길게 울려'라고 말하면 효과음도, 피아노 소리도 만들 수 있어요. 소리의 높이는 '1초에 몇 번 떨리는지'로 정해요. 많이 떨릴수록 높은 소리예요.

도 음을 0.3초 울리기

const audio = new AudioContext();← 소리 상자를 준비해요

const tone = audio.createOscillator();← 떨리면서 소리를 내는 작은 악기를 만들어요

tone.frequency.value = 262;← 1초에 262번 떨리면 '도' (440번이면 '라')

tone.connect(audio.destination);← 스피커에 이어요

tone.start(); tone.stop(audio.currentTime + 0.3);← 지금 울리고 0.3초 뒤에 멈춰요

글자를 읽어 주는 목소리도 브라우저에 들어 있어요. 읽을 문장과 언어(한국어, 영어)만 알려주면 돼요.

글자 읽어 주기

const voice = new SpeechSynthesisUtterance("apple");← 읽을 문장

voice.lang = "en-US";← 영어 발음으로 (한국어는 "ko-KR")

speechSynthesis.speak(voice);← 소리 내 읽어요

브라우저는 사람이 화면을 한 번 누르기 전에는 소리를 못 내게 막아요. 갑자기 소리가 나서 놀라지 않게 하려는 거예요. 그래서 게임은 '시작' 버튼을 누른 뒤부터 소리가 나요.

내 프로그램에서 찾아보기

작업실 '코드' 탭에서 이 글자를 찾아보세요.

AudioContextfrequencyspeechSynthesis

작업실에서 해 보기

채팅창에 이렇게 보내 보세요.

“버튼을 누를 때마다 '톡' 하는 짧은 효과음을 넣어줘”

🧩 이 내용이 나오는 따라 만들기