JS特效第143弹：黑色胶带mp3音乐播放器特效_js唱片特效

作者：天景科技苑 | 2024-07-23 18:01:43

踩

js唱片特效

jQuery 和 css3制作复古的黑色胶带音乐播放器，点击开始或暂停按钮播放。可修改audio里面的mp3链接地址即可使用，先来看看效果：

一部分关键的代码如下：


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Cassette Player</title>
 
<link rel="stylesheet" href="css/style.css">
 
</head>
<body>
 
  <section>
    <div class="wrapper">
      <div class="polka-dot"></div>
      <div class="player-wrapper">
        <div class="player-container">
          <div class="player">
            <div class="cassete">
              <div class="rotator-container">
                <div class="cog left-cog">
                  <div class="chil1"></div>
                  <div class="chil2"></div>
                  <div class="cog-img"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
                      <path d="M23.9,13l4.1-2.3l-4.1-7.1l-4.1,2.3l-1.6-0.8V0.3H9.9v4.8L8.2,5.9L4.1,3.6L0,10.7L4.1,13V15L0,17.3l4.1,7.1l4.1-2.3l1.6,1
	v4.7h8.2v-4.7l1.6-1l4.1,2.3l4.1-7.1L23.9,15C23.9,15,23.9,13,23.9,13z M14,16.7c-1.5,0-2.6-1.2-2.6-2.6c0-1.5,1.2-2.6,2.6-2.6
	s2.6,1.2,2.6,2.6S15.5,16.7,14,16.7z" />
                    </svg></div>
                </div>
 
                <div class="cog right-cog">
                  <div class="chil1"></div>
                  <div class="chil2"></div>
                  <div class="cog-img"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
                      <path d="M23.9,13l4.1-2.3l-4.1-7.1l-4.1,2.3l-1.6-0.8V0.3H9.9v4.8L8.2,5.9L4.1,3.6L0,10.7L4.1,13V15L0,17.3l4.1,7.1l4.1-2.3l1.6,1
	v4.7h8.2v-4.7l1.6-1l4.1,2.3l4.1-7.1L23.9,15C23.9,15,23.9,13,23.9,13z M14,16.7c-1.5,0-2.6-1.2-2.6-2.6c0-1.5,1.2-2.6,2.6-2.6
	s2.6,1.2,2.6,2.6S15.5,16.7,14,16.7z" />
                    </svg></div>
                </div>
              </div>
            </div>
          </div>
          <div class="screws one"></div>
          <div class="screws two"></div>
          <div class="screws three"></div>
          <div class="screws four"></div>
          <div class="base">
            <div class="bottom-base"></div>
          </div>
        </div>
      </div>
      <div class="controls-container">
        <button class="btn play" onClick="bgmPlay()"></button>
        <button class="btn"></button>
        <button onClick="bgmStop()" class="btn"></button>
        <button class="btn"></button>
      </div>
    </div>
  </section>
  
  <audio id='player_audio' src='media/gdsj4p.mp3' type="audio/mp3"></audio>
 
<script src='js/jquery.min.js'></script>
<script src="js/script.js"></script>
 
</body>
</html>

全部代码：黑色胶带mp3音乐播放器特效

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/870958