오디오 삽입 하는 방법

audio

HTML5에서 배경 음악이나 효과음 등 오디오를 삽입할 때는 <audio> 태그를 사용합니다. 이때 대부분의 브라우저에서 mp3 파일을 지원하기 때문에 mp3 파일을 사용하는 것이 좋습니다.

 

기본형

<audio autoplay controls loop muted preload="xxx">
  <source src="xxx" type="xxx">
  이 문장은 사용자의 웹 브라우저가 audio 태그를 지원하지 않을 때 나타납니다!
</audio>

• autoplay : 오디오를 자동 재생합니다.
• controls : 재생, 정지, 볼륨, 진행바 등 컨트롤 막대를 표시합니다.
• loop : 오디오를 반복 재생합니다.
• muted : 오디오를 음소거합니다.
• preload : 오디오를 재생하기 전에 파일의 내용을 미리 다운로드하여 불러올지를 정합니다.
• source
  • src : 경로를 입력합니다. 웹브라우저가 가장 많이 지원하는 형식은 MP3입니다.
  • type : 타입을 입력합니다. 만약 MP3 파일이라면 audio/mp3라고 적습니다.

 

예제

• mp3 오디오를 HTML에 삽입합니다.
• 페이지 로드되면 오디오가 자동 재생되고, 반복하여 재생됩니다.
• 크기, 배치 등은 CSS를 이용하는 것이 좋습니다.

 

<audio controls>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls muted>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls loop>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

<audio controls loop muted>
  <source src="//bit.ly/3euuS7B" type="audio/mpeg">
</audio>

 

브라우저 정책이 변경되어 자동재생 autoplay 속성은 무분별한 광고 및 스팸의 이유로 차단되었습니다. 버튼을 누르거나, 브라우저 설정에서 자동재생 속성을 변경하는 것과 같이 사용자가 재생 의사를 밝히는 특정 행동을 한다면 오디오를 재생할 수 있습니다.

 

오디오 도구

구글 드라이브로 오디오 링크 만들기

 

기타 HTML 참조

• 제목
• 문단
• 줄바꿈
• 공백
• 목록
• 이미지
• 동영상
• 오디오
• 링크
• 표
• 양식
• 인용구
• 기초

HTML로 돌아 가기

참조 또는 인용 문구를 나타내는 방법 - q, blockquote

 

참고 사이트 - https://urliveblogger.blogspot.com/p/google-drive-download-link.html // 공유 링크 만드는 사이트

 

출처 - https://urliveblogger.blogspot.com/2021/01/html-audio.html