mgtv - 素材

当前位置:Gxlcms > 播放器 > JS渐变边框MP3播放器代码

JS渐变边框MP3播放器代码

时间:2021-07-01 10:21:17 帮助过:0人阅读

JS渐变边框MP3播放器代码 JS渐变边框MP3播放器代码是一款基于JS+CSS3绘制的圆形音乐播放器,支持上一首或下一首切换,播放暂停,音量控制等。
<head>
<meta charset="utf-8">
<title>JS渐变边框MP3播放器代码 - mgtv素材</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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">

<p>来源:<a href="https://www.mgtv.xyz" target="_blank">mgtv素材</a></p>
</div>
</body>