HTML5提供了一種嵌入背景音樂到網(wǎng)頁的方式,而且不需要依賴第三方插件。下面是使用HTML5代碼實現(xiàn)網(wǎng)頁播放背景音樂的例子:
<audio autoplay loop> <source src="music.mp3" type="audio/mp3"> </audio>
以上代碼中,使用了HTML5的<audio>標簽來嵌入音頻文件,其中autoplay屬性用來自動播放,loop屬性用來循環(huán)播放。在<source>標簽中指定音頻文件的路徑和類型,此處使用了MP3格式的音頻。
此外,還可以為播放控件添加樣式,使其更符合實際需要。以下是一個完整的HTML5播放背景音樂的代碼示例:
<style> .music-control { position: fixed; right: 10px; bottom: 10px; width: 50px; height: 50px; cursor: pointer; background-image: url(music.png); background-size: cover; animation: rotate 2s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <div class="music-control"></div> <script> var audio = new Audio(); audio.src = "music.mp3"; audio.loop = true; audio.play(); var musicControl = document.querySelector(".music-control"); musicControl.onclick = function () { if (audio.paused) { audio.play(); musicControl.classList.add("music-play"); } else { audio.pause(); musicControl.classList.remove("music-play"); } }; </script>
以上代碼中,使用了CSS樣式對播放控件進行了一些修飾,代碼中還添加了JavaScript腳本,實現(xiàn)了播放控件的點擊事件,可以在點擊時實現(xiàn)控制音樂播放與暫停的操作。
上一篇svg加入css3變形
下一篇html5播放mp3代碼