圆形光影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 发布，如需转载请注明出处。
