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

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

admin2年前 (2021-06-18)JavaScript536

原生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

相关文章

四种标题文字动画特效

四种标题文字动画特效

本页面的标题就是用的其中一种动画特效h2.TitleAnimate b {   display: inlin...

js轮播图滑块过渡特效

js轮播图滑块过渡特效

js flipping插件制作简洁时尚的带缩略图的大图轮播幻灯片展示,点击左右箭头按钮,标题,缩略图,大图滑动切换效果。下载链接: https://pan.ba...

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

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

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

关于bootstrap.min.js.map报错404的问题

关于bootstrap.min.js.map报错404的问题

相信很多用过BootStrap框架的伙伴都遇到过bootstrap.min.js.map 404的错误,明明自己并没有去调用这个文件为什么会报这个错误呢?小沫就...

大气磅礴的滑块网页背景

大气磅礴的滑块网页背景

<html>     <head>     <...

用Ajax获取IP,公共IP地址和IP地理定位API

用Ajax获取IP,公共IP地址和IP地理定位API

<script type="text/javascript">     va...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。
X 要酷!乐于助人,网络是一个神奇的地方,玩得愉快,击掌