实现简易音乐播放器-PartOne
2018-06-10 本文已影响0人
Gettingjie
基础
HTML5 提供了 <audio> 标签来实现了前端对音乐媒体的原生支持，并且也提供了支持 JavaScript 操作 <audio> 对象的方法。使得前端不在需要类似于 Flash 的其它插件才能实现对音乐媒体的操作。
[参考]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
本例中 <audio> 对象用到的方法和属性有：
play() : 使音乐媒体文件播放。
pause() : 使音乐媒体文件的播放暂停。
duration : 返回音乐媒体文件的时长(秒)。
currentTime : 返回音乐媒体文件当前的播放时间或设置当前的播放跳转时间。
实现基础样式以及播放控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MusicControl</title>
<style>
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
.control-button {
margin-top: 10px;
margin-left: 20px;
}
.control-button::after {
content: '';
display: block;
clear: both;
}
.play-control-button {
width: 64px;
height: 64px;
background-image: url(icons.png);
float: left;
margin-right: 10px;
cursor: pointer;
}
.prev {
background-position: 0 0;
}
.next {
background-position: 0 -64px;
}
.play {
background-position: 0 -192px;
}
.pause {
background-position: 0 -128px;
}
.control-bar {
margin-top: 20px;
margin-left: 20px;
}
.control-bar::after {
content: '';
display: block;
clear: both;
}
.controlTime {
float: left;
color: #ccc;
}
.play-control-progress {
margin-left: 4px;
margin-right: 4px;
margin-top: 8px;
float: left;
display: block;
width: 300px;
height: 5px;
background-color: #ccc;
}
</style>
</head>
<body>
<audio id="music" src="demo.mp3"></audio>
<div class="control-button">
<div class="play-control-button prev" id="controlOne"></div>
<div class="play-control-button play" id="controlTwo"></div>
<div class="play-control-button next" id="controlThree"></div>
</div>
<div class="control-bar">
<span class="controlTime" id="beginTime">00:00</span>
<div class="play-control-progress" id="controlProgress"></div>
<span class="controlTime" id="endTime">99:99</span>
</div>
<script>
let music = document.getElementById('music');
let controlOne = document.getElementById('controlOne');
let controlTwo = document.getElementById('controlTwo');
let controlThree = document.getElementById('controlThree');
let controlProgress = document.getElementById('controlProgress');
controlTwo.addEventListener('click', () => {
if(controlTwo.className == "play-control-button play") {
controlTwo.className = "play-control-button pause"
music.play();
} else if (controlTwo.className == "play-control-button pause") {
controlTwo.className = "play-control-button play";
music.pause();
}
})
</script>
</body>
</html>
按钮的素材都集中在一张整图中，用 CSS-Sprite 来选择按钮各自的小图片。
icons.png
CSS中的 box-sizing: border-box; 使得盒子模型的width 和 height 不会受到 padding 或 border 等属性的影响。
[参考]: http://caibaojian.com/30-seconds-of-css/#box-sizing-reset
通过 <audio> 对象的 play() 和 pause() 方法来控制音乐的播放，通过改变元素 className 的方法来控制样式的切换。
