圆形光影mp3音频播放器特效
原生js css3绘制圆形光影音乐播放器,支持上一首或下一首切换,播放暂停,音量控制,音乐播放进度条控制,音乐列表播放,输入添加音乐播放地址等功能。这是一款很全酷炫的mp3音乐播放实例。你值得拥有!
.container { display: flex; align-items: center; justify-content: center; } .glow { position: absolute; width: 300px; height: 300px; background: linear-gradient(0deg, #000000, #262626); border-radius: 50%; } .glow::before, .glow::after { content: ""; position: absolute; top: -2px; left: -2px; background: linear-gradient( 45deg, #ff00ee, #0000ff, #00ff00, #ff0000, #ff00ee, #0000ff, #00ff00, #ffff00, #ff0000 ); background-size: 400%; max-width: calc(300px + 4px); max-height: calc(300px + 4px); width: calc(300px + 4px); height: calc(300px + 4px); z-index: -1; animation: animate 20s linear infinite; border-radius: 50%; } .disable-animation::before, .disable-animation::after { animation-play-state: paused; } .glow::after { filter: blur(28px); } #player, #playlist { width: 243px; height: 212px; text-align: center; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } #songName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 30px; } .playlist-btn { width: 243px; margin-top: 30px; text-align: center; position: relative; left: 50%; transform: translateX(-50%); } .hide { display: none; } #list { height: 118px; max-height: 118px; margin-top: 16px; font-size: 12px; overflow-x: hidden; overflow-y: scroll; color: #fff; text-align: left; padding-left: 8px; border: 2px solid #262626; border-radius: 5px; } .list-item { line-height: 30px; height: 30px; margin-top: 4px; } .list-container button { width: 30px; padding: 0; float: right; margin-right: 4px; } .add-list { padding: 4px 6px; } .wrap-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; display: inline-block; } #sourceUrl { background: none; padding: 8px; border: 2px solid #1f1f1f; border-radius: 47px; outline: none; color: white; height: 30px; width: 192px; } #sourceUrl:active, #sourceUrl:focus { border: 2px solid #0088ff; } .text { color: #ffffff; display: block; } button { background: #000000; color: #ffffff; background: linear-gradient(0deg, #000000, #262626); font-size: 14px; border: none; outline: none; padding: 0px 15px; width: 55px; height: 30px; line-height: 30px; border-radius: 32px; } button:hover { box-shadow: 0 0 8px 0px #ffffff61; } button:active { box-shadow: inset 0 0 6px 0px #ffffff61; } #seek, #volume { -webkit-appearance: none; border: 1px solid #000000; height: 5px; vertical-align: middle; border-radius: 20px; background-color: #232323; outline: none; } #seek::-webkit-slider-thumb, #volume::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid #000000; border-radius: 10px; background: #ffffff; } #seek { display: block; width: 230px; } .scrollbar::-webkit-scrollbar { max-width: 5px; max-height: 5px; } .scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; background: #333; } .scrollbar::-webkit-scrollbar-thumb:hover { box-shadow: inset 0 0 1px 1px #5c6670; } .scrollbar::-webkit-scrollbar-track:hover { border: 1px solid #000000; border-radius: 20px; background-color: #232323; } @keyframes animate { 0% { background-position: 0 0; } 50% { background-position: 400% 0; } 100% { background-position: 0 0; } }
<div class="container"> <div id="glow" class="glow disable-animation"> <div id="player"> <span class="text">音频播放</span> <br> <span id="songName" class="text">歌名部分</span> <br> <div class="playback_controls"> <button onClick="skip('prev')"> <i class="fa fa-fast-backward"></i> </button> <button onClick="playpause()"> <i class="fa fa-play"></i><i class="fa fa-pause"></i> </button> <button onClick="stop()"> <i class="fa fa-stop"></i> </button> <button onClick="skip('next')"> <i class="fa fa-fast-forward"></i> </button> </div> <br> <div id="seekbar"> <input type="range" oninput="setPos(this.value)" id="seek" value="0" max=""> </div> <br> <div class="volume_controls"> <button onClick="mute()"> <i id="mute" class="fa fa-volume-up"></i> </button> <input type="range" id="volume" oninput="setVolume(this.value)" min="0" max="1" step="0.01" value="1"> </div> </div> <div id="playlist" class="hide"> <span class="text">播放列表</span> <div class="list-container"> <div id="list" class="scrollbar"> <div class="list-item"> <div class="wrap-text"><span>https://www.17sucai.com/preview/1644949/2019-11-02/17_musicball/music/whkl.mp3</span></div> <button onClick="removeList(this)">×</button> </div> <div class="list-item"> <div class="wrap-text"><span>https://www.17sucai.com/preview/1644949/2019-11-02/17_musicball/music/lx.mp3</span></div> <button onClick="removeList(this)">×</button> </div> </div> <div class="add-list"> <input id="sourceUrl" type="text" placeholder="输入音乐播放地址" /> <button onClick="addList()">+</button> </div> </div> </div> <div class="playlist-btn"> <button onClick="togglePlaylist()"> <i id="playlist-btn" class="fa fa-list"></i> </button> </div> </div> </div>
var song = new Audio; var isStopped = true; var currentSong = 0; var playlist = ["https://www.ytmp3.cn/down/50223.mp3","https://www.ytmp3.cn/down/75068.mp3"]; var playlistVisible = false; function skip(to) { if (to == 'prev') { stop(); currentSong = (--currentSong)%playlist.length; if (currentSong < 0) { currentSong += playlist.length; } playpause(); } else if (to == 'next') { stop(); currentSong = (++currentSong)%playlist.length; playpause(); } } function playpause() { if (!song.paused) { song.pause(); document.getElementById("glow").classList.add("disable-animation"); } else { if (isStopped) { song.src = playlist[currentSong]; } song.play(); songFile = playlist[currentSong].split("/"); songName = document.getElementById("songName"); songName.innerHTML = songFile[songFile.length - 1]; document.getElementById("glow").classList.remove("disable-animation"); isStopped = false; } } function stop() { song.pause(); document.getElementById("glow").classList.add("disable-animation"); song.currentTime = 0; document.getElementById("seek").value = 0; isStopped = true; document.getElementById("songName").innerHTML = "Coding and Stuff"; } function setPos(pos) { song.currentTime = pos; } function mute() { if (song.muted) { song.muted = false; document.getElementById('mute').className = "fa fa-volume-up"; } else { song.muted = true; document.getElementById('mute').className = "fa fa-volume-off"; } } function setVolume(volume) { song.volume = volume; } function togglePlaylist() { if (playlistVisible) { document.getElementById('playlist').className = "hide"; document.getElementById('player').className = ""; playlistVisible = false; } else { document.getElementById('player').className = "hide"; document.getElementById('playlist').className = ""; playlistVisible = true; } } function addList() { sourceUrl = document.getElementById('sourceUrl').value; sourceUrl.split(",").forEach((file) => { fileUrl = file.trim(); if (fileUrl != "" && playlist.indexOf(fileUrl) == -1) { parent = document.getElementById('list'); listItem = document.createElement('div'); listItem.setAttribute('class','list-item'); wrapper = document.createElement('div'); wrapper.setAttribute('class','wrap-text'); span = document.createElement('span'); span.innerHTML = fileUrl; wrapper.appendChild(span); listItem.appendChild(wrapper); btn = document.createElement('button'); btn.setAttribute('onclick','removeList(this)'); btn.innerHTML = '×'; listItem.appendChild(btn); parent.appendChild(listItem); playlist.push(fileUrl); document.getElementById('sourceUrl').value = ''; } }); } function removeList(item) { index = playlist.indexOf(item.parentElement.firstChild.innerText); if (index != -1){ playlist.splice(index,1); item.parentElement.remove(); } } song.addEventListener('error', function(){ stop(); document.getElementById("songName").innerHTML = "Error Loading Audio"; }); song.addEventListener('timeupdate', function() { curtime = parseInt(song.currentTime,10); document.getElementById('seek').max = song.duration; document.getElementById('seek').value = curtime; }); song.addEventListener("ended", function() { song.pause(); song.currentTime = 0; document.getElementById('seek').value = 0; if ((currentSong + 1) >= playlist.length) { currentSong = 0; } else { currentSong++; } stop(); song.src = playlist[currentSong]; playpause(); }); var input = document.getElementById("sourceUrl"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); addList(); } });
版权声明:本文由 LzxBlog 发布,如需转载请注明出处。