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

马coder

于 2024-02-12 10:45:00 发布

阅读量521

点赞数 9

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375558

版权

这篇文章介绍了如何使用jQuery和CSS3技术创建一个具有复古风格的黑色胶带音乐播放器，通过修改audio标签的mp3链接实现音乐播放控制，包括开始和暂停按钮。

摘要由CSDN通过智能技术生成

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音乐播放器特效