代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>音乐播放器</title> <style> @font-face { font-family: 'ChillCalligraphy'; src: url('./img/ChillCalligraphy_QiuHong.otf'); } *{ padding: 0; margin: 0; font-family: 'ChillCalligraphy'; -webkit-user-select: none; } body { height: 100%; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; background-color: #6e7cf5; } video{ position: absolute; width: 100%; } .shell { position: absolute; z-index: 1; width: 330px; height: 580px; border-radius: 15px; /* background-color: #fff6e7; */ box-shadow: 0 10px 30px #00000085; /* 设置上高光和左高光，使其看起来更加逼真 */ border-top: 1px solid rgba(255, 255, 255, .9); border-left: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(to right bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3), rgba(255, 255, 255, .2)); /* 重点：使元素背景模糊化 */ backdrop-filter: blur(16px); display: flex; flex-direction: column; align-items: center; justify-content: center; } .cover { width: 280px; height: 270px; overflow: hidden; position: absolute; top: 20px; border-radius: 5px; box-shadow: 0 5px 30px #7d70ecb7; } .cover img { width: 100%; } .info { position: absolute; top: 305px; text-align: center; } .info .title { font-size: 35px; color: rgb(40, 45, 100); } .info .singer { font-size: 20px; color: #6e7cf5; } .volume-box { display: none; position: absolute; top: 370px; z-index: 1; padding: 0 20px; } .volume-box.active { display: block; } .volume-box .volume-down { position: absolute; left: -15px; cursor: pointer; color: rgb(40, 45, 100); } .volume-box .volume-up { position: absolute; right: -15px; top: 50%; transform: translateY(-12px); cursor: pointer; color: rgb(40, 45, 100); } .volume-box .volume-up::selection { background-color: unset; } .volume-box input[type=range] { height: 5px; width: 150px; margin: 0 0 15px 0; } .btn-box { position: absolute; top: 400px; width: 100%; display: flex; justify-content: center; } .btn-box i { font-size: 24px; color: rgb(40, 45, 100); margin: 0 30px; cursor: pointer; } .btn-box i.active { color: #ff3677; } .music-box { position: absolute; top: 445px; } .music-box input[type=range] { height: 5px; width: 230px; margin: 0 0 10px 0; } .music-box input[type=range]::-webkit-slider-thumb { height: 5px; width: 7px; } .music-box .current-time { position: absolute; left: -35px; top: 50%; transform: translateY(-50%); font-size: 12px; color: #252525; } .music-box .duration { position: absolute; right: -35px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgb(40, 45, 100); } .music-box .play, .music-box .pause { position: absolute; left: 50%; top: 55px; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50px; background-color: rgb(160, 200, 250); cursor: pointer; transition: all 0.4s; } .music-box .play i, .music-box .pause i { font-size: 36px; color: rgb(40, 45, 100); position: absolute; left: 50%; top: 50%; transform: translate(-48%, -50%); } .music-box .pause i { font-size: 32px; transform: translate(-50%, -50%); } </style> </head> <body> <video src="./img/4月11日 (1).mp4" controls muted loop autoplay></video> <div class="shell"> <div class="cover"> <img src="./img/butterfly.jpg" alt=""> </div> <div class="info"> <div class="title">入戏太深</div> <div class="singer">马旭东</div> </div> <div class="volume-box"> <span class="volume-down"><i class="material-icons">reduce</i></span> <input type="range" class="volume-range" step="1" value="80" min="0" max="100" oninput="music.volume = this.value/100"> <span class="volume-up"><i class="material-icons">add</i></span> </div> <div class="btn-box"> <i class="material-icons repeat" onclick="handleRepeat()">repeat</i> <i class="material-icons favorite active" onclick="handleFavorite()">favorite</i> <i class="material-icons volume" onclick="handleVolume()">volume_up</i> </div> <div class="music-box"> <span class="current-time">0:0</span> <input type="range" class="seekbar" step="1" value="0" min="0" max="100" oninput="handleSeekBar()"> <audio class="music-element"> <source src="./img/马旭东 - 入戏太深.mp3"> </audio> <span class="duration">0:0</span> <span class="play" onclick="handlePlay()"> <i class="material-icons">play</i> </span> </div> </div> </body> <script> let music = document.querySelector('.music-element') let playBtn = document.querySelector('.play') let seekbar = document.querySelector('.seekbar') let currentTime = document.querySelector('.current-time') let duration = document.querySelector('.duration') //控制音乐播放还是暂停，播放音乐，更改按钮样式为暂停图标，暂停音乐，更改按钮样式为播放图标 //给音乐加上一个监听器，当音乐播放完时给按钮重置到播放前的状态，并将音乐时间重置为0 function handlePlay() { if(music.paused) { music.play() playBtn.className = 'pause' playBtn.innerHTML = '<i class="material-icons">pause</i>' }else { music.pause() playBtn.className = 'play' playBtn.innerHTML = '<i class="material-icons">play</i>' } music.addEventListener('ended',function(){ playBtn.className = 'play' playBtn.innerHTML = '<i class="material-icons">play</i>' music.currentTime = 0 }) } //音乐加载好还没播放的前一帧，将音乐进度条的最大值设为音乐的长度 //音乐长度返回的是秒，将其转化后展示出来 music.onloadeddata = function () { seekbar.max = music.duration let ds = parseInt(music.duration % 60) let dm = parseInt(music.duration / 60) duration.innerHTML = dm+':'+ds } //音乐播放时间更新时，将进度条设置为当前播放时间，并展示出来 music.ontimeupdate = function () { seekbar.value = music.currentTime let cs = parseInt(music.currentTime % 60) let cm = parseInt(music.currentTime / 60) currentTime.innerHTML = cm+':'+cs } //进度条拖动时修改音乐播放时间 function handleSeekBar () { music.currentTime = seekbar.value } let favIcon = document.querySelector('.favorite') //添加或去除active类，.classList.toggle函数会判断当前元素是否含有括号中的类，有就减去，没有就加上 function handleFavorite () { favIcon.classList.toggle('active') } let repIcon = document.querySelector('.repeat') //设置音乐是否循环播放 function handleRepeat () { if(music.loop == true){ music.loop = false repIcon.classList.toggle('active') }else{ music.loop = true repIcon.classList.toggle('active') } } let volIcon = document.querySelector('.volume') let volBox = document.querySelector('.volume-box') //设置是否显示调节音乐音量的进度条 function handleVolume () { volIcon.classList.toggle('active') volBox.classList.toggle('active') } let volumeRange = document.querySelector('.volume-range') let volumeUp = document.querySelector('.volume-up') let volumeDown = document.querySelector('.volume-down') //将音量调大 volumeUp.addEventListener('click',function handleVolumeUp () { volumeRange.value = Number(volumeRange.value) + 1 music.volume = volumeRange.value / 100 }) volumeDown.addEventListener('click',handleVolumeDown) //将音量减小 function handleVolumeDown () { volumeRange.value = Number(volumeRange.value) - 1 music.volume = volumeRange.value / 100 } </script> </html>