volume control
This commit is contained in:
DIYgod
parent
1a03bfe914
commit
70c424a220
92
APlayer.css
92
APlayer.css
|
|
@ -77,20 +77,24 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.aplayer-pic {
|
||||
.aplayer span {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-pic {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.aplayer-pic img {
|
||||
.aplayer .aplayer-pic img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.aplayer-mask {
|
||||
.aplayer .aplayer-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -99,7 +103,7 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.aplayer-button {
|
||||
.aplayer .aplayer-button {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
|
|
@ -110,15 +114,15 @@
|
|||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.aplayer-button:hover {
|
||||
.aplayer .aplayer-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aplayer-hide {
|
||||
.aplayer .aplayer-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer-play {
|
||||
.aplayer .aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
|
|
@ -127,14 +131,14 @@
|
|||
margin: -15px 0 0 -15px;
|
||||
}
|
||||
|
||||
.aplayer-play .icon-play {
|
||||
.aplayer .aplayer-play .icon-play {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aplayer-pause {
|
||||
.aplayer .aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
|
|
@ -142,50 +146,50 @@
|
|||
right: 4px;
|
||||
}
|
||||
|
||||
.aplayer-pause .icon-pause {
|
||||
.aplayer .aplayer-pause .icon-pause {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
.aplayer .aplayer-info {
|
||||
margin-left: 66px;
|
||||
padding: 17px 7px 0 10px;
|
||||
}
|
||||
|
||||
.aplayer-music {
|
||||
.aplayer .aplayer-music {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.aplayer-title {
|
||||
.aplayer .aplayer-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.aplayer-author {
|
||||
.aplayer .aplayer-author {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.aplayer-music a {
|
||||
.aplayer .aplayer-music a {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.aplayer-music a:hover {
|
||||
.aplayer .aplayer-music a:hover {
|
||||
color: #E90F24;
|
||||
}
|
||||
|
||||
.aplayer-controller {
|
||||
.aplayer .aplayer-controller {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aplayer-bar-wrap {
|
||||
margin-right: 110px;
|
||||
.aplayer .aplayer-bar-wrap {
|
||||
margin-right: 120px;
|
||||
}
|
||||
|
||||
.aplayer-bar {
|
||||
.aplayer .aplayer-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
|
|
@ -193,7 +197,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer-loaded {
|
||||
.aplayer .aplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -203,7 +207,7 @@
|
|||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.aplayer-played {
|
||||
.aplayer .aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -212,7 +216,7 @@
|
|||
height: 2px;
|
||||
}
|
||||
|
||||
.aplayer-thumb {
|
||||
.aplayer .aplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
@ -226,20 +230,56 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer-thumb:hover {
|
||||
.aplayer .aplayer-thumb:hover {
|
||||
background: #b7daff;
|
||||
}
|
||||
|
||||
.aplayer-time {
|
||||
.aplayer .aplayer-time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -5px;
|
||||
height: 17px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.icon-volume-down {
|
||||
.aplayer .aplayer-time i {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-volume-wrap {
|
||||
display: inline-block;
|
||||
margin-left: 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-volume-bar-wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 17px;
|
||||
right: -5px;
|
||||
width: 25px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-volume-bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
background: #aaa;
|
||||
}
|
||||
|
||||
.aplayer .aplayer-volume {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
background: #b7daff;
|
||||
}
|
||||
100
APlayer.js
100
APlayer.js
|
|
@ -1,9 +1,9 @@
|
|||
function APlayer(option) {
|
||||
this.option = option;
|
||||
this.init();
|
||||
}
|
||||
|
||||
APlayer.prototype.init = function () {
|
||||
// 填充HTML
|
||||
this.option.element.innerHTML = ''
|
||||
+ '<div class="aplayer-pic">'
|
||||
+ '<img src="' + this.option.music.pic + '">'
|
||||
|
|
@ -23,34 +23,49 @@ APlayer.prototype.init = function () {
|
|||
+ '<div class="aplayer-controller">'
|
||||
+ '<div class="aplayer-bar-wrap">'
|
||||
+ '<div class="aplayer-bar">'
|
||||
+ '<div class="aplayer-loaded" style="width: 0%"></div>'
|
||||
+ '<div class="aplayer-played" style="width: 0%">'
|
||||
+ '<div class="aplayer-loaded" style="width: 0"></div>'
|
||||
+ '<div class="aplayer-played" style="width: 0">'
|
||||
+ '<span class="aplayer-thumb"></span>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<span class="aplayer-time"> - <span class="aplayer-ptime">00:00</span>/<span class="aplayer-dtime">00:00</span><i class="demo-icon icon-volume-down"></i></span>'
|
||||
+ '<span class="aplayer-time">'
|
||||
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
|
||||
+ '<div class="aplayer-volume-wrap">'
|
||||
+ '<i class="demo-icon icon-volume-down"></i>'
|
||||
+ '<div class="aplayer-volume-bar-wrap">'
|
||||
+ '<div class="aplayer-volume-bar">'
|
||||
+ '<div class="aplayer-volume" style="height: 80%"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</span>'
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
|
||||
var _self = this;
|
||||
// 创建audio元素
|
||||
this.audio = document.createElement("audio");
|
||||
this.audio.src = this.option.music.url;
|
||||
this.audio.loop = true;
|
||||
|
||||
// 显示音频总时间
|
||||
var _self = this;
|
||||
this.audio.addEventListener('durationchange', function() {
|
||||
_self.option.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
|
||||
});
|
||||
|
||||
// 显示加载进度条
|
||||
this.audio.addEventListener('canplay', function() {
|
||||
_self.loadedTime = setInterval(function () {
|
||||
var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration;
|
||||
_self.updateBar.call(_self, 'loaded', percentage);
|
||||
_self.updateBar.call(_self, 'loaded', percentage, 'width');
|
||||
if (percentage === 1) {
|
||||
clearInterval(_self.loadedTime);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// 播放暂停按钮
|
||||
this.playButton = this.option.element.getElementsByClassName('aplayer-play')[0];
|
||||
this.pauseButton = this.option.element.getElementsByClassName('aplayer-pause')[0];
|
||||
this.playButton.addEventListener('click', function () {
|
||||
|
|
@ -60,27 +75,22 @@ APlayer.prototype.init = function () {
|
|||
_self.pause.call(_self);
|
||||
});
|
||||
|
||||
// 播放进度控制(拖拽滑块 点击进度条)
|
||||
this.playedBar = this.option.element.getElementsByClassName('aplayer-played')[0];
|
||||
this.loadedBar = this.option.element.getElementsByClassName('aplayer-loaded')[0];
|
||||
if (this.option.autoplay) {
|
||||
this.play();
|
||||
}
|
||||
|
||||
this.thumb = this.option.element.getElementsByClassName('aplayer-thumb')[0];
|
||||
this.bar = this.option.element.getElementsByClassName('aplayer-bar')[0];
|
||||
var barWidth;
|
||||
|
||||
this.bar.addEventListener('click', function (event) {
|
||||
var e = event || window.event;
|
||||
barWidth = _self.bar.clientWidth;
|
||||
var percentage = (e.clientX - getElementLeft(_self.bar)) / barWidth;
|
||||
_self.updateBar.call(_self, 'played', percentage);
|
||||
_self.updateBar.call(_self, 'played', percentage, 'width');
|
||||
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
|
||||
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
|
||||
});
|
||||
|
||||
this.thumb.addEventListener('mousedown', function (event) {
|
||||
var e = event || window.event;
|
||||
this.thumb.addEventListener('mousedown', function () {
|
||||
barWidth = _self.bar.clientWidth;
|
||||
clearInterval(_self.playedTime);
|
||||
document.addEventListener('mousemove', thumbMove);
|
||||
|
|
@ -92,7 +102,7 @@ APlayer.prototype.init = function () {
|
|||
var percentage = (e.clientX - getElementLeft(_self.bar)) / barWidth;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
_self.updateBar.call(_self, 'played', percentage);
|
||||
_self.updateBar.call(_self, 'played', percentage, 'width');
|
||||
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration);
|
||||
}
|
||||
|
||||
|
|
@ -101,11 +111,45 @@ APlayer.prototype.init = function () {
|
|||
document.removeEventListener('mousemove', thumbMove);
|
||||
_self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration;
|
||||
_self.playedTime = setInterval(function () {
|
||||
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration);
|
||||
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
|
||||
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 音量控制
|
||||
this.audio.volume = 0.8;
|
||||
this.volumeBar = this.option.element.getElementsByClassName('aplayer-volume')[0];
|
||||
var volumeBarWrap = this.option.element.getElementsByClassName('aplayer-volume-bar')[0];
|
||||
var volumeicon = _self.option.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0];
|
||||
var barHeight = 35;
|
||||
this.option.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) {
|
||||
var e = event || window.event;
|
||||
var percentage = (barHeight - e.clientY + getElementTop(volumeBarWrap)) / barHeight;
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
_self.updateBar.call(_self, 'volume', percentage, 'height');
|
||||
_self.audio.volume = percentage;
|
||||
if (percentage === 1) {
|
||||
volumeicon.className = 'demo-icon icon-volume-up';
|
||||
}
|
||||
else {
|
||||
volumeicon.className = 'demo-icon icon-volume-down';
|
||||
}
|
||||
});
|
||||
volumeicon.addEventListener('click', function () {
|
||||
if (_self.audio.muted) {
|
||||
_self.audio.muted = false;
|
||||
volumeicon.className = _self.audio.volume === 1 ? 'demo-icon icon-volume-up' : 'demo-icon icon-volume-down';
|
||||
_self.updateBar.call(_self, 'volume', _self.audio.volume, 'height');
|
||||
}
|
||||
else {
|
||||
_self.audio.muted = true;
|
||||
volumeicon.className = 'demo-icon icon-volume-off';
|
||||
_self.updateBar.call(_self, 'volume', 0, 'height');
|
||||
}
|
||||
});
|
||||
|
||||
// 获取元素相对窗口位置
|
||||
function getElementLeft (element){
|
||||
var actualLeft = element.offsetLeft;
|
||||
var current = element.offsetParent;
|
||||
|
|
@ -115,19 +159,35 @@ APlayer.prototype.init = function () {
|
|||
}
|
||||
return actualLeft;
|
||||
}
|
||||
function getElementTop(element){
|
||||
var actualTop = element.offsetTop;
|
||||
var current = element.offsetParent;
|
||||
while (current !== null){
|
||||
actualTop += current.offsetTop;
|
||||
current = current.offsetParent;
|
||||
}
|
||||
return actualTop;
|
||||
}
|
||||
|
||||
// 自动播放
|
||||
if (this.option.autoplay) {
|
||||
this.play();
|
||||
}
|
||||
};
|
||||
|
||||
// 播放
|
||||
APlayer.prototype.play = function () {
|
||||
this.playButton.classList.add('aplayer-hide');
|
||||
this.pauseButton.classList.remove('aplayer-hide');
|
||||
this.audio.play();
|
||||
var _self = this;
|
||||
this.playedTime = setInterval(function () {
|
||||
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration);
|
||||
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width');
|
||||
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
// 暂停
|
||||
APlayer.prototype.pause = function () {
|
||||
this.pauseButton.classList.add('aplayer-hide');
|
||||
this.playButton.classList.remove('aplayer-hide');
|
||||
|
|
@ -135,12 +195,14 @@ APlayer.prototype.pause = function () {
|
|||
clearInterval(this.playedTime);
|
||||
};
|
||||
|
||||
APlayer.prototype.updateBar = function (type, percentage) {
|
||||
// 更新进度条(加载进度条 播放进度条)
|
||||
APlayer.prototype.updateBar = function (type, percentage, direction) {
|
||||
percentage = percentage > 0 ? percentage : 0;
|
||||
percentage = percentage < 1 ? percentage : 1;
|
||||
this[type + 'Bar'].style.width = percentage * 100 + '%';
|
||||
this[type + 'Bar'].style[direction] = percentage * 100 + '%';
|
||||
};
|
||||
|
||||
// 将秒数整理为 00:00 格式
|
||||
APlayer.prototype.secondToTime = function (second) {
|
||||
var add0 = function (num) {
|
||||
return num < 10 ? '0' + num : '' + num;
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ var ap = new APlayer({
|
|||
pic: 'Preparation.jpg'
|
||||
}
|
||||
});
|
||||
ap.init();
|
||||
```
|
||||
|
||||
The following options are available:
|
||||
|
|
@ -73,7 +74,7 @@ API
|
|||
## Todo
|
||||
|
||||
- [x] 播放进度拖拽控制
|
||||
- [ ] 音量控制
|
||||
- [x] 音量控制
|
||||
- [ ] 分享到微博
|
||||
- [ ] 播放列表
|
||||
- [ ] 歌词展示
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
pic: 'Preparation.jpg'
|
||||
}
|
||||
});
|
||||
ap.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "aplayer",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "Wow, such a beautiful html5 music player",
|
||||
"main": "APlayer.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
Loading…
Reference in New Issue