vue 实现移动端语音播放样式

在移动端中，可以使用 HTML5 的 audio 标签来实现音频播放，同时使用 CSS 样式来美化播放器的外观。

以下是一个基本的 HTML 结构：

<div class="audio-player">
  <audio src="audio.mp3" preload="auto"></audio>
  <div class="play-button"></div>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</div>

其中，div.audio-player 是整个播放器的容器，audio 标签用于播放音频文件，div.play-button 是播放/暂停按钮，div.progress-bar 是进度条的容器，div.progress 是进度条的实际进度。

接下来是对应的 CSS 样式：

.audio-player {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 20px 0;
}

.audio-player audio {
  display: none;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
}

.play-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-left: 12px solid #fff;
  border-bottom: 8px solid transparent;
}

.progress-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 2px;
  background-color: #ccc;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #333;
  transition: width 0.3s ease-in-out;
}

其中，audio 标签被隐藏了，play-button 是一个圆形按钮，progress-bar 是一个灰色的进度条，progress 是一个绿色的进度条，可以根据需要调整颜色和样式。

最后，使用 JavaScript 来实现播放/暂停和进度条的更新：

const audio = document.querySelector("audio");
const playButton = document.querySelector(".play-button");
const progressBar = document.querySelector(".progress");

playButton.addEventListener("click", function() {
  if (audio.paused) {
    audio.play();
    playButton.classList.add("playing");
  } else {
    audio.pause();
    playButton.classList.remove("playing");
  }
});

audio.addEventListener("timeupdate", function() {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = progress + "%";
});

audio.addEventListener("ended", function() {
  playButton.classList.remove("playing");
  progressBar.style.width = "0%";
});

其中，timeupdate 事件会在播放进度发生改变时触发，ended 事件会在播放结束时触发。在事件处理函数中，计算出当前播放进度，并将进度条的宽度设置为对应的百分比即可。

以上就是一个简单的移动端语音播放器的实现方式。