当前位置:首页 > 技术博客 > JavaScript > 圆形光影mp3音频播放器特效

圆形光影mp3音频播放器特效

4年前 (2021-06-18)JavaScript764

原生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 发布,如需转载请注明出处。

本文链接:https://www.liuzhixi.cn/html/63.html

标签: JavaScriptCSS

相关文章

js数字拼接

js数字拼接

有时候我们需要把两组数字拼接在一起,那么要怎么办呢?废话不多说直接上代码:var str1 = 110, str2&nb...

JavaScript 中定义数组和操作数组

JavaScript 中定义数组和操作数组

一.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),...

zblog纯净主题文字标签云、文字标签云上下滚动动画

zblog纯净主题文字标签云、文字标签云上下滚动动画

如图所示原生javascript 文字标签云仿快播文字标签云上下滚动出现<style> #divTags dd { &nbs...

Bilibili头部景深对焦效果

Bilibili头部景深对焦效果

交互式鼠标悬停头图景深对焦效果<head>       <meta n...

响应式人物介绍列表ui切换特效

响应式人物介绍列表ui切换特效

一款js css3制作响应式的人物介绍图文列表,带左右按钮控制列表滑动切换效果。可用于企业团队人物介绍ui布局。下载链接: https://pan.baidu....

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

前端用法:JavaScript 获取当前GPS地理位置的方法,保姆级代码!

在网上搜到很多,99%不能用,自己动手将整理记录一下吧,以便后续再使用!<head>     <ti...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。