分为两部分，前面主要介绍Html5为Audio对象提供了用于DOM操作的方法、属性和事件；
后面主要通过使用audio jquery bootstrap在浏览器底部实现的音乐播放器。
效果：
目录
Audio对象
常用方法
| 方法 | 描述 |
| load() | 加载媒体文件，为播放做准备。通常用于播放前的预加载，也会用于重新加载媒体文件。 |
| play() | 播放媒体文件。如果音频没有加载，则加载并播放；如果音频是暂停的，则变为播放。 |
| pause() | 暂停播放媒体文件。 |
| canPlayType() | 测试浏览器是否支持指定的媒体类型。 |
常用属性
| 属性 | 描述 |
| currentSrc | 返回当前音频的URL |
| currentTime | 设置或返回音频中的当前播放位置（秒） |
| duration | 返回音频的长度（秒） |
| ended | 返回音频的播放是否已结束 |
| error | 返回表示音频错误状态的MediaError独享 |
| paused | 设置或返回音频是否暂停 |
| muted | 设置或返回是否关闭声音 |
| volume | 设置或返回音频的音量 |
| autoplay | 布尔值；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成 |
| controls | 如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放 |
| loop | 布尔值；如果声明该属性，将循环播放音频 |
常用事件
| 事件 | 描述 |
| play | 当执行方法play()时触发 |
| playing | 正在播放时触发 |
| pause | 当执行了方法pause()时触发 |
| timeupdate | 当播放位置被改变时触发 |
| ended | 当播放结束后停止播放时触发 |
| waiting | 在等待加载下一帧时触发 |
| ratechange | 在当前播放速率改变时触发 |
| volumechange | 在音量改变时触发 |
| canplay | 以当前播放速率，需要缓冲时触发 |
| canplaythrough | 以当前播放速率，不需要缓冲时触发 |
| durationchange | 当播放时长改变时触发 |
| loadstart | 在浏览器开始在网上寻找数据时触发 |
| progress | 当浏览器正在获取媒体文件时触发 |
| suspend | 当浏览器暂停获取媒体文件，且文件获取并没有正常结束时触发 |
| abort | 当中止获取媒体数据时触发，但这种中止不是由错误引起的 |
| error | 当获取媒体文件过程中出错时触发 |
| emptied | 当所在网络变为初始化状态时触发 |
| stalled | 浏览器尝试获取媒体数据失败时触发 |
| loadedmetadata | 在加载完媒体元数据时触发 |
| loadeddata | 在加载完当前位置的媒体播放数据时触发 |
| seeking | 浏览器正在请求数据时触发 |
| seeked | 浏览器停止请求数据时触发 |
以上方法、属性和事件通过JavaScript来操作。
音乐播放器
音乐播放器分为四个部分，服务端、html页面、样式文件、脚本文件。
Html页面
使用了bootstrap中的图标，需要创建css、fonts文件夹；
引入bootstrap.min.js/bootstrap.min.js及fonts中所有文件，可以自行下载。
内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐播放器</title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="music_main">
<div class="music_left">
<img class="music_img" id="music_img" src="./img/1.jpg" alt="">
</div>
<audio id="player">
<source src="./audio/不分手的恋爱%20–%20汪苏泷.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<div class="play_left">
<div class="music_title">
<span class="music_name">不分手的恋爱 – 汪苏泷</span>
<span class="totalTimeSpan">/03:25</span>
<span class="playTimeSpan">00:00</span>
</div>
<div class="music_rate">
<div class="music-progress"></div>
</div>
</div>
<div class="play_right">
<i class="glyphicon glyphicon-step-backward" id="music_prev"></i>
<i class="glyphicon glyphicon-play" id="music_dian"></i>
<i class="glyphicon glyphicon-step-forward" id="music_next"></i>
</div>
<div class="music_right">
<ul>
<li><i class="glyphicon glyphicon-volume-up" id="setVolume"></i></li>
<li>
<div class="slider">
<input type="range" id="volume" min="0" max="100" value="0">
</div>
</li>
</ul>
</div>
</div>
<script src="./js/jquery-3.2.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/play.js"></script>
</body>
</html>样式文件
其中音量设置是使用滑块器来实现的，这个借鉴的网上的文章。
内容如下：
* {
margin: 0;
padding: 0;
}
.music_main {
position: fixed;
left: 200px;
bottom: 0;
margin-left: 16px;
margin-right: 16px;
height: 70px;
color: #ccc;
width: 80%;
box-shadow: 5px -6px 10px #ccc;
}
.music_left {
float: left;
height: 70px;
margin-right: 10px;
}
.music_img {
width: 70px;
height: 70px;
}
.play_left {
float: left;
width: 450px;
height: 70px;
}
.play_right {
float: left;
width: 400px;
height: 70px;
margin-left: 30px;
color: #000000;
}
.play_left .music_title {
margin-top: 12px;
line-height: 28px;
color: #000000;
}
.play_left .music_title .music_name {
float: left;
font-size: 18px;
}
.play_left .music_title .playTimeSpan {
float: right;
}
.play_left .music_title .totalTimeSpan {
float: right;
}
.play_left .music_rate {
float: left;
width: 98%;
height: 5px;
background: #ccc;
margin-top: 8px;
margin-left: 8px;
border-radius: 2px;
}
.play_left .music-progress {
height: 5px;
background: #ffb800;
border-radius: 2px;
width: 0;
}
.music_right {
width: 500px;
height: 70px;
float: left;
color: #000000;
}
.music_right ul {
list-style: none;
}
.music_right ul li {
float: left;
margin-left: 32px;
}
#music_prev {
line-height: 70px;
font-size: 24px;
margin-left: 126px;
margin-right: 21px;
cursor: pointer;
}
#music_dian {
line-height: 70px;
font-size: 24px;
margin-left: 21px;
margin-right: 21px;
cursor: pointer;
}
#music_next {
line-height: 70px;
font-size: 24px;
margin-left: 21px;
cursor: pointer;
}
#setVolume {
line-height: 70px;
font-size: 24px;
cursor: pointer;
}
.slider {
position: absolute;
top: 50%;
left: 73%;
transform: translate(-50%, -50%);
width: 200px;
height: 14px;
padding: 14px 0 14px 10px;
border-radius: 14px;
display: flex;
align-items: center;
}
.slider p {
font-size: 26px;
font-weight: 600;
padding-left: 30px;
}
.slider input[type="range"] {
-webkit-appearance: none !important;
width: 200px;
height: 2px;
background: #ffdf1f;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height: 30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}脚本文件
通过js来实现赋值播放器歌曲信息，播放暂停，切歌，设置音量等功能。
其中赋值这块，因为ajax请求默认是异步的，赋值会有问题，所以改为同步请求。
内容如下：
window.onload = function () {
// 绑定音频元素
var $player = document.getElementById('player');
// 绑定播放按钮
var $dian = document.getElementById('music_dian');
// 设置音频初始属性
var volume_num = 0.5;
// 当前歌曲索引
var currentIndex = 0;
// 设置播放列表
var music_list = [{
'id': 1,
'cover': './img/1.jpg',
'singer': '汪苏泷',
'song_name': '不分手的恋爱',
'song_path': '../audio/不分手的恋爱%20–%20汪苏泷.mp3'
},];
// 初始化设置
setInit();
// 绑定音频控制开关
$dian.onclick = function () {
if (this.classList == 'glyphicon glyphicon-play') {
this.className = 'glyphicon glyphicon-pause';
$player.play();
} else {
// layui-icon-pause
this.className = 'glyphicon glyphicon-play';
$player.pause();
}
};
// 设置播放器初始属性
function setInit() {
// 设定音量
$player.volume = volume_num;
$('#volume').val(volume_num * 100);
// 通过同步方式获取播放列表信息
$.ajaxSettings.async = false;
$.getJSON('./service.php', {}, function (res) {
// 赋值播放列表
music_list = res;
});
// 设定歌曲封面
$('#music_img').attr('src', music_list[0].cover);
// 设定歌曲名称和歌手
$('.music_name').text(music_list[0].song_name + ' - ' + music_list[0].singer);
// 设定歌曲路径
$player.src = music_list[0].song_path;
}
// 监听播放器播放时间改变事件
$player.addEventListener('timeupdate', function () {
// 当前播放时间
var currentTime = $player.currentTime;
// 总时间
var totalTime = $player.duration;
// 当是数字的时候
if (!isNaN(totalTime)) {
// 得到播放时间与总时长的比值
var rate = currentTime / totalTime;
// 设置时间显示
// 播放时间
$('.playTimeSpan').text(musicTime(currentTime));
// 总时长
$('.totalTimeSpan').text('/' + musicTime(totalTime));
// 设置进度条
$('.music-progress').css('width', rate * 441 + 'px');
}
});
// 设置音量
$('#volume').change(function () {
volume_num = $(this).val();
$player.volume = volume_num * 0.01
});
// 上一首
$('#music_prev').click(function () {
if (currentIndex > 0) {
currentIndex -= 1;
} else {
// 切换到最后一首
currentIndex = music_list.length - 1;
}
// 设置播放标识为暂停
$dian.className = 'glyphicon glyphicon-play';
// 播放时间
$('.playTimeSpan').text('00:00');
// 设置歌曲进度归零
$('.music-progress').css('width', '1px');
// 设置歌曲
setMusic();
});
// 下一首
$('#music_next').click(function () {
if (currentIndex < (music_list.length - 1)) {
currentIndex += 1;
} else {
// 切换为第一首
currentIndex = 0;
}
// 设置播放标识为暂停
$dian.className = 'glyphicon glyphicon-play';
// 播放时间
$('.playTimeSpan').text('00:00');
// 设置歌曲进度归零
$('.music-progress').css('width', '1px');
// 设置歌曲
setMusic();
});
// 设置播放器歌曲信息
function setMusic() {
// 设定歌曲封面
$('#music_img').attr('src', music_list[currentIndex].cover);
// 设定歌曲名称和歌手
$('.music_name').text(music_list[currentIndex].song_name +
' - ' + music_list[currentIndex].singer);
// 设定歌曲路径
$player.src = music_list[currentIndex].song_path;
}
// 歌曲时长（00:00）
function musicTime(sens) {
// 分
var m = parseInt(sens / 60);
// 秒
var s = parseInt(sens % 60);
// 补零
m = m > 9 ? m : "0" + m;
s = s > 9 ? s : "0" + s;
return m + ":" + s;
}
};服务端
使用php语言，主要用于返回数据，因为只是做一个简单播放器，这里只是返回json格式的数据；正常项目中应该做数据处理，再做格式输出。
内容如下：
header('content-type:text/html;charset=utf8 ');
$arr = [
[
'id' => 1,
'cover' => './img/1.jpg',
'singer' => '汪苏泷',
'song_name' => '不分手的恋爱',
'song_path' => './audio/不分手的恋爱%20–%20汪苏泷.mp3'
],
[
'id' => 2,
'cover' => './img/2.jpg',
'singer' => '张镐哲',
'song_name' => '不是我不小心',
'song_path' => './audio/不是我不小心%20–%20张镐哲.mp3'
],
[
'id' => 3,
'cover' => './img/3.jpg',
'singer' => '郑源&陶钰玉',
'song_name' => '不要在我寂寞的时候说爱我',
'song_path' => './audio/不要在我寂寞的时候说爱我%20–%20郑源&陶钰玉.mp3'
],
[
'id' => 4,
'cover' => './img/4.jpg',
'singer' => '齐秦',
'song_name' => '不让我的眼泪陪我过夜',
'song_path' => './audio/不让我的眼泪陪我过夜%20–%20齐秦.mp3'
],
];
echo json_encode($arr);总结
通过固定悬浮在浏览器的底部实现的音乐播放器。主要实现了显示歌曲信息，歌曲播放与暂停，跟随歌曲播放展示相应进度，音量可调节（默认50%），可通过标识进行切歌。
通过音乐播放器练习，对audio属性和事件增进了解、并掌握了怎么应用，下一步准备做一个复杂一些的应用。
借鉴文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
