音频播放2.0

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <div id="glow" class="glow disable-animation">
    <div id="player">
      <span class="text">Audio Play</span>
      <br>
      <span id="songName" class="text">Coding and Stuff</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">Playlist</span>
      <div class="list-container">

<div id="list" class="scrollbar"><div class="list-item"><div class="wrap-text"><span>https://www.bensound.com/bensound-music/bensound-summer.mp3</span></div><button onclick="removeList(this)">×</button></div></div>

</div>
    </div>

</div>
</div>

css

@import url("https://s2.pstatp.com/cdn/expire-1-M/font-awesome/5.1.1/css/all.min.css");
* {
  box-sizing: border-box;
}
html {
  background: #000000;
}
html,
body,
.container {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.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;
  }
}

JavaScript

var song = new Audio;
var isStopped = true;
var currentSong = 0;
var playlist = ["https://www.jq22.com/newjs/bensound-summer.mp3"];
var playlistVisible = 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 setVolume(volume) {
	song.volume = volume;
}

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();
	}
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg