在HTML5中，我们可以通过<audio>元素轻松地在网页上嵌入音乐播放功能。但是，仅仅嵌入音乐还不够，我们还需要优雅地控制音乐的播放与停止。下面，我将详细介绍如何在网页上实现这一功能。

步骤一：嵌入音乐

首先，我们需要在HTML页面中嵌入音乐。可以使用<audio>元素来实现。以下是一个简单的例子：

<audio id="myAudio" controls>
  <source src="your-music-file.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

在这个例子中，我们创建了一个<audio>元素，并为其设置了id属性，方便后续操作。controls属性允许用户通过浏览器自带的控件来控制音乐的播放。<source>元素指定了音乐文件的路径和类型。

步骤二：控制播放与停止

要实现音乐的播放与停止，我们需要使用JavaScript。以下是一个简单的JavaScript代码示例：

// 获取audio元素
var audio = document.getElementById("myAudio");

// 播放音乐
function playMusic() {
  audio.play();
}

// 停止音乐
function stopMusic() {
  audio.pause();
}

在这个例子中，我们首先通过getElementById方法获取到<audio>元素。然后，我们定义了两个函数：playMusic和stopMusic。playMusic函数使用play方法播放音乐，而stopMusic函数使用pause方法停止音乐。

步骤三：添加按钮

为了方便用户操作，我们可以在网页上添加两个按钮，分别用于播放和停止音乐。以下是一个简单的HTML代码示例：

<button onclick="playMusic()">播放</button>
<button onclick="stopMusic()">停止</button>

在这个例子中，我们添加了两个按钮，并分别为它们设置了onclick属性。当用户点击“播放”按钮时，会调用playMusic函数播放音乐；当用户点击“停止”按钮时，会调用stopMusic函数停止音乐。

步骤四：整合代码

将以上代码整合到一起，我们就可以实现一个简单的音乐播放与停止功能。以下是一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>音乐播放与停止</title>
</head>
<body>
  <audio id="myAudio" controls>
    <source src="your-music-file.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
  </audio>
  <button onclick="playMusic()">播放</button>
  <button onclick="stopMusic()">停止</button>

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

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

    function stopMusic() {
      audio.pause();
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个简单的网页，用户可以通过点击按钮来播放和停止音乐。

总结

通过以上步骤，我们可以轻松地在网页上实现音乐播放与停止功能。希望这篇文章能帮助你更好地理解HTML5音乐播放与控制的相关知识。