在HTML5中，我们可以使用<audio>元素来嵌入音乐文件，并且通过JavaScript来控制音乐的播放与停止。下面，我将一步步地教你如何轻松实现这一功能。

1. 创建HTML5音乐播放器

首先，我们需要在HTML中创建一个音乐播放器。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
</head>
<body>
    <h2>我的音乐播放器</h2>
    <audio id="musicPlayer" controls>
        <source src="your-music-file.mp3" type="audio/mpeg">
        您的浏览器不支持 audio 元素。
    </audio>
    <button onclick="playMusic()">播放</button>
    <button onclick="stopMusic()">停止</button>

    <script src="script.js"></script>
</body>
</html>

在这个例子中，我们使用<audio>元素来嵌入音乐文件，并添加了两个按钮来控制音乐的播放与停止。

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来控制音乐的播放与停止。创建一个名为script.js的文件，并添加以下代码：

// 获取音乐播放器元素
var musicPlayer = document.getElementById('musicPlayer');

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

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

在这段代码中，我们首先通过getElementById方法获取到音乐播放器元素。然后，我们定义了两个函数playMusic和stopMusic，分别用于播放和停止音乐。

3. 优化用户体验

为了提高用户体验，我们可以在播放音乐时显示一个播放图标，在停止音乐时显示一个停止图标。以下是相应的HTML和CSS代码：

<!-- 添加到HTML中 -->
<div id="controls">
    <button onclick="playMusic()">
        <img src="play-icon.png" alt="播放">
    </button>
    <button onclick="stopMusic()">
        <img src="stop-icon.png" alt="停止">
    </button>
</div>

/* 添加到CSS中 */
#controls {
    margin-top: 10px;
}

#controls button {
    background: none;
    border: none;
    cursor: pointer;
}

#controls img {
    width: 30px;
    height: 30px;
}

这样，我们就完成了一个简单的音乐播放器，可以轻松地在HTML5页面中控制音乐的播放与停止。

总结

通过上述步骤，你就可以在HTML5页面中轻松地控制音乐的播放与停止了。这种方法简单易行，适用于大多数网页开发场景。希望这篇文章能帮助你更好地理解如何在网页中嵌入和控制音乐播放。