<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js+css3炫酷黑色圆形渐变边框音乐播放器代码</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<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>/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>/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>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
