웹 페이지에 배경 음악을 추가하려면 <embed>...</embed> 요소를 사용하면 됩니다. 여기에 autoplay(자동 재생) 관련 속성을 함께 지정하면, 페이지가 로드될 때마다 음악이 자동으로 백그라운드에서 실행됩니다.
플레이어가 화면에 나타나지 않도록 하려면 width와 height 값을 아주 작게 설정하면 됩니다. 또한 loop 속성을 추가하면 음악이 종료된 후 다시 처음부터 반복 재생할지 여부를 지정할 수 있습니다. 음악 파일은 서버에 업로드한 후, 해당 파일 경로를 src 속성에 입력해 주세요.
embed 요소의 주요 속성
- src: 재생할 음악 파일의 경로를 지정합니다.
- autostart: 페이지가 로드될 때 자동으로 재생할지 설정합니다.
- loop: 음악이 끝난 후 반복 재생할지 여부를 지정합니다.
- width / height: 플레이어의 크기를 지정하며, 값을 최소화하면 화면에서 숨길 수 있습니다.
예제
아래 코드를 실행하면 웹 페이지에 배경 음악을 추가할 수 있습니다:
<!DOCTYPE html> <html> <head> <title>HTML 배경 음악</title> </head> <body> <p>음악이 백그라운드에서 재생 중입니다.</p> <p>(노래: Windows 샘플 음악으로 제공되는 Kalimba)</p> <embed src="/html/Kalimba.mp3" loop="true" autostart="true" width="2" height="0"> </body> </html>
참고: 최신 표준 방식
<embed> 요소는 과거에 널리 사용되었지만, 현재 HTML5 표준에서는 권장되지 않는 요소입니다. 최신 브라우저 환경에서는 <audio> 태그를 사용하는 것이 더 안전하고 호환성이 좋습니다.
<audio src="/html/Kalimba.mp3" autoplay loop></audio>
이처럼 <audio> 태그에 autoplay와 loop 속성만 추가하면 별도의 플러그인 없이 간단하게 배경 음악을 구현할 수 있습니다.