在網頁設計中,音樂播放是一個非常常見也非常有趣的功能。使用web技術,我們可以通過CSS來為網頁添加音樂播放器,并且可以自定義音樂播放器的樣式。
/* css樣式 */ audio { width: 300px; height: 30px; margin-top: 20px; } /* 音樂播放器圖片 */ .play { width: 20px; height: 20px; margin-left: 5px; background-image: url('./play.png'); background-size: cover; cursor: pointer; } .pause { width: 20px; height: 20px; margin-left: 5px; background-image: url('./pause.png'); background-size: cover; cursor: pointer; }
以上是一個基本的音樂播放器樣式,使用了audio標簽來添加音樂播放器,使用了css樣式來控制音樂播放器的大小和位置。
另外,我們還可以添加播放、暫停圖標,并通過JavaScript來控制音樂的播放和暫停。
/* JavaScript */ var audio = document.querySelector('audio'); var playBtn = document.querySelector('.play'); var pauseBtn = document.querySelector('.pause'); /* 添加播放和暫停事件 */ playBtn.addEventListener('click', function() { audio.play(); playBtn.style.display = 'none'; pauseBtn.style.display = 'block'; }); pauseBtn.addEventListener('click', function() { audio.pause(); playBtn.style.display = 'block'; pauseBtn.style.display = 'none'; });
以上是一個簡單的使用CSS和JavaScript來實現網頁音樂播放的代碼,使用時只需要將音樂文件和播放圖標添加到相應的位置即可。
上一篇mysql 運維面試題
下一篇css設置超鏈接的間距