HTML卡片播放器

最新推荐文章于 2024-05-13 00:38:50 发布

一个陌生朋友

最新推荐文章于 2024-05-13 00:38:50 发布

阅读量1.6k

点赞数 46

文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_52848404/article/details/136639970

版权

几步骤创建一个卡片播放器

参考代码

不规则形状

动态聊天输入框

首先，需要创建一个基本的HTML结构，包括一个div元素作为卡片播放器的容器。在这个div中，将添加一个head部分来包含meta标签和title标签，以及一个body部分来放置我们的卡片播放器内容。

接下来，在body部分添加一个div元素，这个div将作为卡片播放器的主体。在这个主体div中，设置一些基本的CSS样式，比如position: relative;来定位卡片，margin: 50px auto;来使卡片居中显示，width: 300px;和height: 70px;来设置卡片的尺寸，以及background-color: #fff;来设置卡片的背景颜色。

然后，在卡片内部添加一个div元素作为内容区域，这个div将包含卡片的标题、图片和进度条。设置这个内容区域的position: relative;来定位卡片内部的元素，overflow-y: hidden;来隐藏图片边角的露出。

对于图片，添加两个img标签，分别用于显示播放按钮和图片内容。设置这些img标签的width和height属性来控制图片的大小，并使用border-radius属性来使图片呈现圆形。

对于进度条，添加一个div元素，并设置position: absolute;来定位进度条，top: 45px;和left: 82px;来设置进度条的位置，width: 170px;和height: 5px;来设置进度条的尺寸，以及border-radius: 10px;来使进度条圆角。

最后，添加一些JavaScript代码来处理播放按钮的点击事件和进度条的更新。使用document.getElementById来获取播放按钮和进度条元素，并添加事件监听器来响应用户的点击操作。对于进度条，使用setInterval函数来定期更新进度条的宽度，以模拟播放进度。

通过以上步骤，创建一个基本的卡片播放器，并使用CSS来美化界面，使用JavaScript来增加交互性。

参考代码

这是一段参考代码复制然后粘贴你的编辑器上拆开进行学习吧！😬😬


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>播放器</title>
<style>
/* css样式区 */
</style>
</head>
<body>

<audio id="audio"></audio> <!-- 创建一个音频元素，用于播放音乐 -->

<div class="card">
  <div class="box-content">
    <img class="img1" src="c.png" alt="Image"/> <!-- 显示一张图片 -->
    <button id="Play"></button> <!-- 播放按钮 -->
    <img class="img2" src="wy.svg" alt="Logo"/> <!-- 显示另一张图片，可能是一个logo -->
    <p id="songTitle">太阳sunnyz-风雨惹的祸</p> <!-- 显示歌曲标题 -->
  </div>
  <div id="progress-bar">
    <div id="progress"></div> <!-- 进度条，显示音乐播放进度 -->
  </div>
  <span id="current-time">00:00</span> <!-- 显示当前音乐播放时间 -->
  <button id="switch"></button> <!-- 开关按钮 -->
</div>

<script>
  //JavaScript逻辑区
</script>
</body>
</html>


/* 设置整体页面背景颜色为 #ededed */
body {
  background-color: #ededed;
}

/* 卡片样式 */
.card {
  position: relative; /* 相对定位 */
  margin: 30% auto; /* 垂直居中，水平自动 */
  width: 300px;
  height: 70px;
  background-color: #fff;
  border-radius: 10px; /* 圆角 */
  overflow-y: hidden; /* y轴溢出内容隐藏 */
}

/* 内容框样式 */
.box-content {
  width: 100%;
  height: 100%;
  overflow:auto; /* 内容溢出显示滚动条 */
}

/* 图片1样式 */
.box-content .img1 {
  width: 70px;
  height:70px;
}

/* 播放按钮样式 */
#Play {
  position:absolute; /* 绝对定位 */
  top:10px;
  left:10px;
  width: 50px;
  height:50px;
  border:none; /* 去除边框 */
  background-color: transparent;
  background-image: url('bf.png'); /* 图片路径 */
  background-size: cover; /* 图片铺满 */
  border-radius:100%; /* 圆形 */
}

/* 图片2样式 */
.box-content .img2 {
  position:absolute; /* 绝对定位 */
  top:5px;
  left:80px;
  width:25px;
  background-color:Transparent;
}

/* 段落样式 */
.box-content p {
  position: absolute; /* 绝对定位 */
  top: 7px;
  left: 110px;
  width: 50%;
  margin-top: 0;
  white-space: nowrap; /* 文本不换行 */
  overflow: hidden; /* 溢出内容隐藏 */
  text-overflow: ellipsis; /* 溢出文本显示省略号 */
}

/* 进度条样式 */
#progress-bar {
  position: absolute; /* 绝对定位 */
  top: 45px;
  left: 82px;
  width: 170px;
  height: 5px;
  border-radius:10px;
  background-color: #ededed;
  overflow: hidden; /* 溢出内容隐藏 */
  cursor: pointer; /* 光标样式为手型 */
  transition: width 0.3s; /* 宽度变化动画效果 */
}

/* 进度条进度样式 */
#progress {
  height: 100%;
  width: 0%;
  background-color: #00CCFF;
  transition: width 0.1s; /* 宽度变化动画效果 */
}

/* 当前时间样式 */
#current-time {
  position: absolute; /* 绝对定位 */
  bottom: 5px;
  left: 83px;
  color: #999;
  font-size:10px;
}

/* 切换按钮样式 */
#switch {
  position:absolute; /* 绝对定位 */
  right:10px;
  bottom:10px;
  width:25px;
  height:25px;
  border:none; /* 去除边框 */
  border-radius:50%; /* 圆形 */
  background-color: transparent;
  background-image: url('xyq.png'); /* 图片路径 */
  background-size: cover; /* 图片铺满 */
}


const audio = document.getElementById('audio');
const playButton = document.getElementById('Play');
const switchButton = document.getElementById('switch');
const songTitle = document.getElementById('songTitle');
const progressBar = document.getElementById('progress-bar');
const currentTimeDisplay = document.getElementById('current-time');

let isPlaying = false; // 当前是否正在播放
let currentSongIndex = 0; // 当前歌曲索引
let currentSongTime = 0; // 当前歌曲播放进度
const songs = ['fy01.mp3', 'gnbk.mp3', 'gnxb.mp3']; // 歌曲文件名数组
const customSongNames = ['太阳sunnyz-风雨惹的祸', '懒大王-姑娘别哭泣 (懒羊羊版)', '抠抠-姑娘向北我向南']; // 自定义歌曲名称数组

// 播放歌曲
function playSong() {
  if (audio.src !== songs[currentSongIndex]) {
    audio.src = songs[currentSongIndex];
  }
  audio.currentTime = currentSongTime;
  audio.play();
  isPlaying = true;
  updateUI();
}

// 更新界面显示
function updateUI() {
  playButton.style.backgroundImage = "url('zt.png')"; // 播放按钮背景图
  playButton.style.width = '25px'; // 播放按钮宽度
  playButton.style.height = '25px'; // 播放按钮高度
  playButton.style.top = '35.5px'; // 播放按钮上边距
  playButton.style.left = '235px'; // 播放按钮左边距
  playButton.style.zIndex = '9'; // 播放按钮层级
  progressBar.style.width = '145px'; // 进度条宽度
  playButton.style.transition = 'width 0.3s, height 0.3s, top 0.3s, left 0.3s, background-image 1s'; // 播放按钮过渡效果
  songTitle.textContent = customSongNames[currentSongIndex]; // 歌曲标题
}

// 暂停歌曲
function pauseSong() {
  audio.pause();
  isPlaying = false;
  currentSongTime = audio.currentTime;
  playButton.style.backgroundImage = "url('bf.png')"; // 播放按钮背景图
  playButton.style.width = ''; // 播放按钮宽度
  playButton.style.height = ''; // 播放按钮高度
  playButton.style.top = ''; // 播放按钮上边距
  playButton.style.left = ''; // 播放按钮左边距
  playButton.style.zIndex = ''; // 播放按钮层级
  progressBar.style.width = ''; // 进度条宽度
  playButton.style.transition = 'width 0.3s, height 0.3s, top 0.3s, left 0.3s, background-image 1s'; // 播放按钮过渡效果
}

// 点击播放按钮
playButton.addEventListener('click', () => {
  if (!isPlaying) {
    playSong();
  } else {
    pauseSong();
  }
});

// 点击切换按钮
switchButton.addEventListener('click', () => {
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  currentSongTime = 0; // 重置当前歌曲的播放进度为 0
  playSong();
});

// 监听歌曲时间更新
audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100; // 计算进度百分比
  progressBar.querySelector('#progress').style.width = `${progress}%`; // 更新进度条宽度

  const currentMinutes = Math.floor(audio.currentTime / 60); // 当前分钟数
  const currentSeconds = Math.floor(audio.currentTime % 60); // 当前秒数
  const formattedTime = `${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`; // 格式化时间显示
  currentTimeDisplay.textContent = formattedTime; // 更新当前时间显示
});

// 点击切换按钮
switchButton.addEventListener('click', () => {
  currentSongIndex = (currentSongIndex + 1) % songs.length;
  currentSongTime = 0; // 重置当前歌曲的播放进度为 0
  playSong();
});

// 点击进度条
progressBar.addEventListener('click', (e) => {
  const boundingRect = progressBar.getBoundingClientRect(); // 获取进度条的位置信息
  const offsetX = e.clientX - boundingRect.left; // 鼠标点击位置的相对偏移量
  const barWidth = boundingRect.width; // 进度条总宽度
  const seekTime = (offsetX / barWidth) * audio.duration; // 根据偏移量计算跳转的时间
  audio.currentTime = seekTime; // 跳转到指定时间点
});

一个陌生朋友

关注

46
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
HTML卡片播放器

首先，需要创建一个基本的HTML结构，包括一个div元素作为卡片播放器的容器。在这个div中，将添加一个head部分来包含meta标签和title标签，以及一个body部分来放置我们的卡片播放器内容。接下来，在body部分添加一个div元素，这个div将作为卡片播放器的主体。在这个主体div中，设置一些基本的CSS样式，比如position: relative;来定位卡片，margin: 50px auto;来使卡片居中显示，width: 300px;和height: 70px;
复制链接

扫一扫