网页屏幕兼容性问题及音频播放按钮重复播放、切换功能修复求助

一、窗口最小化时的兼容性问题 #

问题表现 #

窗口缩小后，字体过大导致布局错乱，背景图片尺寸过小无法适配屏幕。

解决方案 #

1. 背景图片使用cover属性，确保始终覆盖整个视口
2. 字体采用相对单位vw（视窗宽度百分比），随屏幕尺寸自动缩放
3. 调整绝对定位逻辑，改用底部定位替代固定百分比，避免小屏幕错位
4. 添加媒体查询优化小屏幕布局

修改后的CSS代码 #

body {
  margin: 0;
  min-height: 100vh;
  background-image: url("../imgg/1.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* 覆盖整个视口 */
}

h1 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 5vw; /* 相对视窗宽度的字体大小 */
  margin: 0;
}

.sayfa1 {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.second {
  text-align: center;
  font-size: 2vw;
  position: absolute;
  top: 190%;
  right: 50%;
  transform: translate(50%, -50%); /* 修正定位逻辑 */
}

.third {
  text-align: center;
  font-size: 2.5vw;
  position: absolute;
  top: 240%;
  right: 50%;
  transform: translate(50%, -50%); /* 修正定位逻辑 */
}

.but1 {
  position: absolute;
  bottom: 5%; /* 改用底部定位更适配 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.word {
  position: relative;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  font-size: 1.5vw;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #29b4af;
  color: rgb(255, 255, 255);
  border-radius: 5px;
}

.next {
  background-color: #29b4af;
  color: white;
  border-radius: 5px;
}

.start {
  background-color: #f1f1f1;
  color: black;
  border-radius: 8px;
}

.starbut {
  border-radius: 8px;
  position: absolute;
  bottom: 5%;
  left: 40%;
  transform: translateX(-50%);
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
  font-size: 1.5vw;
}

#icon {
  width: 30px;
  cursor: pointer;
}

/* 媒体查询优化小屏幕体验 */
@media (max-width: 768px) {
  .second, .third {
    top: auto;
    bottom: 20%;
  }
  .second {
    bottom: 15%;
  }
}

二、音频播放控制问题 #

问题表现 #

点击播放按钮仅能播放一次，无法切换播放/停止状态，按钮图标无变化。

解决方案 #

1. 监听音频播放状态，点击按钮时判断当前状态：播放中则暂停并重置音频，暂停状态则重新播放
2. 切换按钮图标（播放图标♫和停止图标♯）
3. 重置文字变色计数器，确保每次播放都重新开始高亮动画

修改后的JavaScript代码 #

let counter = 0;
const mysong = document.getElementById("mysong"),
  icon = document.getElementById("icon"),
  words = [...document.querySelectorAll(".word", ".wordw")],
  speed = 550;

function setColor() {
  words[counter].style.color = "#29b4af";
  words.forEach((word, index) => {
    if (index !== counter) {
      word.style.color = "initial";
    }
  });
  setTimeout(() => {
    counter++;
    if (counter < words.length) {
      setColor();
    } else {
      words.forEach(el => el.style.color = 'initial');
      counter = 0; // 播放结束后重置计数器
    }
  }, speed);
}

icon.onclick = () => {
  if (mysong.paused) {
    // 暂停状态：开始播放
    counter = 0; // 重置计数器
    setColor();
    mysong.play();
    icon.innerHTML = "&#9839;"; // 切换为停止图标
  } else {
    // 播放状态：暂停并重置
    mysong.pause();
    mysong.currentTime = 0; // 重置音频到开头
    words.forEach(el => el.style.color = 'initial'); // 重置文字颜色
    counter = 0; // 重置计数器
    icon.innerHTML = "&#9835;"; // 切换为播放图标
  }
}

内容的提问来源于stack exchange，提问作者Amna mirza