使用 HTML、CSS 创建在线音乐播放器

创建一个在线音乐播放器通常涉及到HTML（超文本标记语言）、CSS（层叠样式表）以及JavaScript或者一些音频播放库，如Audio.js等。下面是简单步骤的概述：

1. **HTML结构**：
- 使用`<audio>`标签来嵌入音频文件，比如 `<audio controls src="song.mp3"></audio>`, 这里`controls`属性允许浏览器自带的播放控件。
- 可能还会添加其他元素，如标题 (`<h1>`)、描述 (`<p>`) 和封面图片 (`<img>`).

<div class="player">
    <img src="cover.jpg" alt="Song Cover">
    <h1>歌曲名称</h1>
    <p>歌手和专辑信息...</p>
    <audio controls src="song.mp3"></audio>
</div>

2. **CSS样式**：
- 设计播放器的外观，包括大小、颜色、布局等。可以使用内联样式(`style="..."`), 或者外部CSS文件关联。
- 可以改变按钮的颜色、字体、间距等，使其看起来更专业。

.player {
    width: 400px;
    height: 150px;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
}

3. **JavaScript增强功能（可选）**：
- 实现播放、暂停、上一曲、下一曲、音量控制等功能，这通常需要事件监听和操作`<audio>`元素的API。
- 如果要支持跨源音频，可能需要用到CORS或Flash插件。

document.querySelector('audio').addEventListener('play', function() {
    // 播放事件
});