mobile compatibility
This commit is contained in:
DIYgod
parent
b296e14d85
commit
28554b0f35
21
README.md
21
README.md
|
|
@ -60,7 +60,7 @@ ap.init();
|
|||
{
|
||||
element: document.getElementById('player1'), // Optional, player element
|
||||
narrow: false, // Optional, narrow style
|
||||
autoplay: true, // Optional, autoplay
|
||||
autoplay: true, // Optional, autoplay, not supported by mobile browsers
|
||||
showlrc: false, // Optional, show lrc
|
||||
music: { // Required, music info
|
||||
title: 'Preparation', // Required, music title
|
||||
|
|
@ -127,13 +127,26 @@ gulp
|
|||
- [x] 窄样式 及 移动版样式
|
||||
- [x] 歌词展示
|
||||
- [x] 默认选项
|
||||
- [ ] 移动端兼容性
|
||||
- [x] 移动端兼容性
|
||||
- [ ] 播放列表
|
||||
- [ ] 宽度高度自定义
|
||||
|
||||
## Issues
|
||||
|
||||
- [ ] 在 Firefox 中调整进度后，播放到最后时音乐总时间会自动变长
|
||||
- [ ] 在 Firefox 中调整进度后, 播放到最后时音乐总时间会自动变长
|
||||
- [ ] 移动端各种浏览器触发事件的时机不同: 目前使用 loadedmetadata 代替 canplay
|
||||
```
|
||||
举例:
|
||||
WIFI环境:
|
||||
iOS: 加载? durationchange(真) loadedmetadata 点击 开始播放 loadeddata canplay canplaythrough
|
||||
Android Chrome: durationchange(真) loadedmetadata loadeddata canplay canplaythrough 点击 加载 开始播放
|
||||
Android UC: durationchange loadedmetadata loadeddata 加载 durationchange(真) canplay canplaythrough 点击 开始播放
|
||||
PC: 加载 开始播放 durationchange(真) loadedmetadata loadeddata canplay canplaythrough
|
||||
蜂窝环境:
|
||||
Android Chrome: durationchange loadedmetadata loadeddata canplay canplaythrough 点击 加载 开始播放 durationchange(真)
|
||||
Android UC: durationchange loadedmetadata loadeddata 点击 加载 开始播放 canplay canplaythrough durationchange(真)
|
||||
```
|
||||
- [ ] 移动版 Safari 和 部分 Android 浏览器不支持 volume
|
||||
- [ ] 部分 Android 浏览器不支持 duration
|
||||
|
||||
|
||||
## LICENSE
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/DIYgod/APlayer" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
|
||||
<a href="https://github.com/DIYgod/APlayer" target="_blank" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
|
||||
<div class="container">
|
||||
<h1>APlayer</h1>
|
||||
<h2>Wow, such a beautiful html5 music player</h2>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "aplayer",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"description": "Wow, such a beautiful html5 music player",
|
||||
"main": "APlayer.js",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,12 @@ function APlayer(option) {
|
|||
throw 'APlayer Error: element option null';
|
||||
}
|
||||
|
||||
this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i);
|
||||
// compatibility: some mobile browsers don't suppose autoplay
|
||||
if (this.isMobile) {
|
||||
option.autoplay = false;
|
||||
}
|
||||
|
||||
// default options
|
||||
var defaultOption = {
|
||||
element: document.getElementsByClassName('aplayer')[0],
|
||||
|
|
@ -33,7 +39,7 @@ APlayer.prototype.init = function () {
|
|||
this.lrcLine = [];
|
||||
var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML;
|
||||
var lines = lrcs.split(/\n/);
|
||||
var timeExp = /\[(\d{2})\:(\d{2})\.(\d{2})\]/;
|
||||
var timeExp = /\[(\d{2}):(\d{2})\.(\d{2})]/;
|
||||
var lrcExp = /](.*)$/;
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
var oneTime = timeExp.exec(lines[i]);
|
||||
|
|
@ -74,7 +80,7 @@ APlayer.prototype.init = function () {
|
|||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="aplayer-time">'
|
||||
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">00:00</span>'
|
||||
+ ' - <span class="aplayer-ptime">00:00</span> / <span class="aplayer-dtime">(oﾟ▽ﾟ)</span>'
|
||||
+ '<div class="aplayer-volume-wrap">'
|
||||
+ '<i class="demo-icon aplayer-icon-volume-down"></i>'
|
||||
+ '<div class="aplayer-volume-bar-wrap">'
|
||||
|
|
@ -114,11 +120,14 @@ APlayer.prototype.init = function () {
|
|||
// show audio time
|
||||
var _self = this;
|
||||
this.audio.addEventListener('durationchange', function() {
|
||||
_self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
|
||||
if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
|
||||
_self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
|
||||
}
|
||||
});
|
||||
|
||||
// can play: remove loading style, show loading progress bar
|
||||
this.audio.addEventListener('canplay', function() {
|
||||
// can play, remove loading style, show loading progress bar
|
||||
// compatibility: different mobile browsers have different triggering time, use loadedmetadata event to take the place of canplay event
|
||||
this.audio.addEventListener('loadedmetadata', function () {
|
||||
_self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + _self.music.author;
|
||||
_self.loadedTime = setInterval(function () {
|
||||
var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration;
|
||||
|
|
|
|||
|
|
@ -312,7 +312,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
|
|||
width: 100%;
|
||||
height: 10%;
|
||||
content: ' ';
|
||||
background: linear-gradient(to bottom, #fff, transparent);
|
||||
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
@ -324,7 +327,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height;
|
|||
width: 100%;
|
||||
height: 33%;
|
||||
content: ' ';
|
||||
background: linear-gradient(to top, #fff, transparent);
|
||||
background: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||
background: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
Loading…
Reference in New Issue