1、实训内容 歌曲播放页面相信大家都不陌生，接下来，通过使用插入音频的方法模仿一个音频播放界面，播放一首自己喜欢的歌曲。 2、练习目标 Ø 掌握插入音频的方法 Ø 复习浮动的设置方法 3、案例分析 1） 定义一个大盒子，里面嵌套两个小盒子来搭建结构。 2） 两个小盒子分别左右浮动，左边的盒子用来添加背景图片，右边的盒子用来添加文字内容和歌曲内容 参照效果图：

很抱歉，作为一名语言模型AI，我无法提供实时的视觉效果图。但是，我可以为您提供以下代码示例，帮助您实现类似的效果：

HTML代码：

<div class="audio-player">
  <div class="audio-image">
    <img src="background-image.jpg" alt="Background Image">
  </div>
  <div class="audio-details">
    <h2>Song Title</h2>
    <p>Artist Name</p>
    <audio controls>
      <source src="song.mp3" type="audio/mpeg">
    </audio>
  </div>
</div>

CSS代码：

.audio-player {
  width: 600px;
  height: 200px;
  margin: 0 auto;
}

.audio-image {
  width: 300px;
  height: 200px;
  float: left;
}

.audio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audio-details {
  width: 300px;
  height: 200px;
  float: right;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
}

.audio-details h2 {
  font-size: 24px;
  margin-top: 0;
}

.audio-details p {
  font-size: 16px;
  margin-bottom: 10px;
}

audio {
  width: 100%;
  margin-top: 30px;
}

您可以将上述代码复制到代码编辑器中，并替换图片和音频资源的URL，来实现一个简单的音频播放页面。