在HTML5中，我们可以使用多种方法来控制音乐的播放和停止。以下是一些简单技巧和案例，帮助你更好地理解如何在页面上实现音乐播放的暂停功能。

一、使用JavaScript控制音乐播放

1.1 引入音乐元素

首先，我们需要在HTML中引入一个<audio>元素，用于加载和播放音乐文件。

<audio id="myAudio" src="your-music-file.mp3"></audio>

1.2 使用JavaScript控制播放

通过JavaScript，我们可以轻松地控制音乐的播放、暂停和停止。

<script>
    var audio = document.getElementById('myAudio');
    // 播放音乐
    audio.play();
    // 暂停音乐
    audio.pause();
    // 停止音乐
    audio.pause(); // 或使用 audio.currentTime = 0;
</script>

1.3 完整案例

以下是一个完整的示例，演示了如何在HTML5页面中播放和停止音乐。

<!DOCTYPE html>
<html>
<head>
    <title>音乐播放和停止示例</title>
</head>
<body>
    <audio id="myAudio" src="your-music-file.mp3"></audio>
    <button onclick="playMusic()">播放音乐</button>
    <button onclick="stopMusic()">停止音乐</button>

    <script>
        var audio = document.getElementById('myAudio');

        function playMusic() {
            audio.play();
        }

        function stopMusic() {
            audio.pause();
            audio.currentTime = 0; // 将音乐时间设置为0
        }
    </script>
</body>
</html>

二、使用HTML5的autoplay和controls属性

2.1 使用autoplay属性

如果你想要在页面加载时自动播放音乐，可以将<audio>元素的autoplay属性设置为true。

<audio autoplay src="your-music-file.mp3"></audio>

2.2 使用controls属性

controls属性允许用户在播放器界面中控制音乐的播放、暂停、音量等。

<audio controls src="your-music-file.mp3"></audio>

三、使用CSS控制播放器样式

为了使音乐播放器更加美观，我们可以使用CSS对其进行样式设计。

audio {
    width: 300px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 5px;
    padding: 10px;
}

通过以上方法，你可以轻松地在HTML5页面上控制音乐的播放和停止。希望这些技巧和案例对你有所帮助！