배경 음악 재생의 기본 원리
HTML의 <audio> 요소는 웹 페이지에 오디오를 추가하는 표준적인 방법입니다. 그러나 페이지가 열릴 때 자동으로 음악이 흐르도록 만들려면 <embed>...</embed> 요소를 사용하는 것이 좋습니다. 여기에 autoplay(또는 autostart) 속성을 함께 지정하면, 페이지가 로드되는 즉시 배경 음악이 자동으로 재생됩니다.
플레이어 숨기기와 반복 재생 설정
플레이어가 화면에 나타나지 않도록 width와 height 값을 아주 작게 설정합니다. 이렇게 하면 사용자에게는 보이지 않지만 음악은 계속 재생됩니다. 또한 loop 속성을 추가하면 오디오가 끝난 뒤 자동으로 처음부터 다시 반복 재생됩니다.
예제 코드
아래 코드를 실행하면 웹 페이지에서 배경 음악이 재생되는 모습을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML background music</title> </head> <body> <p>The music is running in the background.</p> <p>(Song: Kalimba which is provided as a Sample Music in Windows)</p> <embed src="/html/Kalimba.mp3" loop="true" autostart="true" width="2" height="0"> </body> </html>
참고 사항
<embed> 요소는 비교적 오래된 방식입니다. 최신 브라우저 환경에서는 <audio> 요소와 autoplay 속성을 조합해 사용하는 것이 권장됩니다. 또한 대부분의 브라우저는 사용자 경험 보호를 위해 자동 재생 정책을 적용하고 있으므로, 실제 서비스에서는 사용자가 페이지와 상호작용한 후 음악이 재생되도록 구현하는 것이 좋습니다.