用html css怎么实现一个网页多个页面能够播放同一首歌并且进度相同，而且可以调节声音大小，手动关闭

要实现这个功能，需要使用HTML5中的`<audio>`标签和JavaScript来控制音频播放。

首先，在每个页面中，都需要使用同一个`<audio>`标签来播放同一首歌。可以在一个页面中添加如下代码：

<audio id="myAudio" src="song.mp3" preload="auto"></audio>

这里定义了一个ID为`myAudio`的`<audio>`标签，指定了要播放的音频文件`song.mp3`，并设置了`preload`属性为`auto`，表示在页面加载时就开始预加载音频。

然后，可以在每个页面的JavaScript代码中，使用`document.getElementById()`方法获取到这个`<audio>`标签，并控制音频的播放、暂停、音量等。可以参考下面的代码：

<!-- 页面1 -->
<a href="page2.html" onclick="playSong()">跳转到页面2并播放音乐</a>

<script>
function playSong() {
  var audio = document.getElementById("myAudio");
  audio.play();
}
</script>

<!-- 页面2 -->
<a href="page1.html" onclick="pauseSong()">返回页面1并暂停音乐</a>

<script>
function pauseSong() {
  var audio = document.getElementById("myAudio");
  audio.pause();
}
</script>

这样，当用户在页面1点击跳转链接时，会调用`playSong()`函数来播放音乐；当用户在页面2点击返回链接时，会调用`pauseSong()`函数来暂停音乐。

另外，可以使用`volume`属性来控制音量大小，使用`currentTime`属性来获取或设置当前播放进度。例如，可以在页面中添加一个滑动条来控制音量和进度：

<input type="range" min="0" max="1" step="0.1" value="1" oninput="setVolume(this.value)">
<input type="range" min="0" max="100" step="1" value="0" oninput="setProgress(this.value)">

<script>
function setVolume(volume) {
  var audio = document.getElementById("myAudio");
  audio.volume = volume;
}

function setProgress(progress) {
  var audio = document.getElementById("myAudio");
  audio.currentTime = progress / 100 * audio.duration;
}
</script>

这里定义了两个滑动条，一个用来控制音量大小，一个用来控制播放进度。当用户拖动滑动条时，会调用`setVolume()`或`setProgress()`函数来设置音量或进度。

最后，要添加一个关闭按钮来手动停止音乐的播放：

<button onclick="stopSong()">停止音乐</button>

<script>
function stopSong() {
  var audio = document.getElementById("myAudio");
  audio.pause();
  audio.currentTime = 0;
}
</script>

这里定义了一个按钮，当用户点击时，会调用`stopSong()`函数来停止音乐的播放，并将播放进度重置为0秒。