(HTML/Javascript) 오디오 재생

그동안 오디오를 사용하지 않아서 강의에 배경음악을 추가해야 했습니다.

다음은 오디오를 재생하는 두 가지 방법입니다.

쉬운 목차

1. HTML 오디오 태그

<오디오 소스=“./사운드/bg.mp3” 고리 통제 수단>오디오가 지원되지 않을 때 표시되는 텍스트오디오>

'추천 관련글,

재산	값	설정 내용
소스	사운드 파일 경로	재생할 음원 파일(mp3, wav, ogg 파일 등)의 경로를 설정합니다.
자동 재생	자동 재생	자동재생 여부 설정 (브라우저에서 html 파일을 불러오자마자 음악파일이 재생됨)
고리	고리	반복 재생 여부 설정
통제 수단	통제 수단	컨트롤 패널(재생/정지 버튼 등) 노출 설정
음소거	음소거	음소거 설정

크롬 브라우저에서는 자동재생이 금지되어 있어 자동재생이 불가능합니다.

1-3. 각 브라우저에서 지원되지 않는 오디오 형식 처리

오디오 태그 내부의 소스 태그를 통해 다양한 오디오 형식을 입력하면 브라우저에서 자동으로 지원하는 형식으로 재생합니다.

<오디오 고리 통제 수단>

<원천 소스=“./사운드/bg.mp3” 유형=“오디오/mpeg”>

<원천 소스=“./사운드/bg.mp3” 유형=“오디오/오그”>

오디오>

1) 오디오 태그를 HTML로 선언하면 요소 획득 방식으로 확보할 수 있다.

<오디오 소스=“./사운드/bg.mp3” ID=“마이오디오”>오디오가 지원되지 않을 때 표시되는 텍스트오디오>

const 마이오디오 = 문서.쿼리 선택기(‘#마이오디오’);

myAudio.놀다();

myAudio.정지시키다();

2) JavaScript에서 Audio 객체를 생성하고 파일 경로를 설정할 수 있습니다.

const 마이오디오 = 새로운 오디오();

myAudio.소스 = ‘./사운드/bg.mp3’;

myAudio.놀다();

myAudio.정지시키다();

전)

<단추 유형=“단추” ID=“놀다”>오디오 재생단추>

const 놀다 = 문서.쿼리 선택기(“#놀다”);

놀다.

addEventListener(“딸깍 하는 소리”() => {

myAudio.자동 재생 = 진실;

myAudio.놀다();

});

참조