diff --git a/docs/README.md b/docs/README.md index 290e8e4..c8e95a2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -135,7 +135,7 @@ const ap = new APlayer({ + `ap.pause()`: pause audio -+ `ap.seek(time: number)`: seek to specified time ++ `ap.seek(time: number)`: seek to specified time, the unit of time is second ```js ap.seek(100); @@ -188,6 +188,12 @@ const ap = new APlayer({ + `ap.mode`: return current player mode, 'mini' or 'normal' ++ `ap.notice(text: string, time: number, opacity: number)`: show message, the unit of time is millisecond, the default of time is 2000, the default of opacity is 0.8, setting time to 0 can disable notice autohide. + + ```js + ap.notice('Amazing player', 2000, 0.8); + ``` + + `ap.destroy()`: destroy player + `ap.audio`: native audio @@ -242,6 +248,8 @@ Player events - addaudio - removeaudio - destroy +- notice_show +- notice_hide ## LRC diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md index 747b7c7..da02e9f 100644 --- a/docs/zh-Hans/README.md +++ b/docs/zh-Hans/README.md @@ -136,7 +136,7 @@ const ap = new APlayer({ + `ap.pause()`: 暂停音频 -+ `ap.seek(time: number)`: 跳转到特定时间 ++ `ap.seek(time: number)`: 跳转到特定时间，时间的单位为秒 ```js ap.seek(100); @@ -189,6 +189,12 @@ const ap = new APlayer({ + `ap.mode`: 返回播放器当前模式，'mini' 或 'normal' ++ `ap.notice(text: string, time: number, opacity: number)`: 显示通知，时间的单位为毫秒，默认时间 2000 毫秒，默认透明度 0.8，设置时间为 0 可以取消通知自动隐藏 + + ```js + ap.notice('Amazing player', 2000, 0.8); + ``` + + `ap.destroy()`: 销毁播放器 + `ap.audio`: 原生 video @@ -243,6 +249,8 @@ ap.on('ended', function () { - addaudio - removeaudio - destroy +- notice_show +- notice_hide ## 歌词 diff --git a/src/css/index.scss b/src/css/index.scss index 85efd5c..426959a 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -11,6 +11,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; overflow: hidden; user-select: none; line-height: initial; + position: relative; * { box-sizing: content-box; @@ -62,7 +63,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; .aplayer-list { display: none; } - .aplayer-pic { + .aplayer-pic, + .aplayer-body { height: $aplayer-height; width: $aplayer-height; } @@ -91,6 +93,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; } } + .aplayer-body { + position: relative; + } + .aplayer-icon { width: 15px; height: 15px; @@ -510,6 +516,23 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; } } } + + .aplayer-notice { + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 12px; + border-radius: 4px; + padding: 5px 10px; + transition: all .3s ease-in-out; + overflow: hidden; + color: #fff; + pointer-events: none; + background-color: #f4f4f5; + color: #909399; + } } @keyframes aplayer-roll { diff --git a/src/js/events.js b/src/js/events.js index faa1f65..38ca3f4 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -9,7 +9,7 @@ class Events { 'timeupdate', 'volumechange', 'waiting' ]; this.playerEvents = [ - 'destroy', 'switchaudio', 'addaudio', 'removeaudio' + 'destroy', 'switchaudio', 'addaudio', 'removeaudio', 'notice_show', 'notice_hide' ]; } diff --git a/src/js/player.js b/src/js/player.js index 22c7f5e..4c88a8b 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -148,7 +148,7 @@ class APlayer { // audio download error: an error occurs this.on('error', () => { - this.template.author.innerHTML = ` - Error happens ╥﹏╥`; + this.notice('An audio error has occurred.', 0); }); // multiple audio play @@ -488,6 +488,21 @@ class APlayer { } } + notice (text, time = 2000, opacity = 0.8) { + this.template.notice.innerHTML = text; + this.template.notice.style.opacity = opacity; + if (this.noticeTime) { + clearTimeout(this.noticeTime); + } + this.events.trigger('notice_show', text); + if (time) { + this.noticeTime = setTimeout(() => { + this.template.notice.style.opacity = 0; + this.events.trigger('notice_hide'); + }, time); + } + } + handlePlayPromise (callback) { this.playedPromise = this.playedPromise.then(callback).catch((err) => { console.error(err); diff --git a/src/js/template.js b/src/js/template.js index e1ce4f2..a0f1036 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -47,6 +47,7 @@ class Template { this.title = this.container.querySelector('.aplayer-title'); this.author = this.container.querySelector('.aplayer-author'); this.dtime = this.container.querySelector('.aplayer-dtime'); + this.notice = this.container.querySelector('.aplayer-notice'); } } diff --git a/src/template/player.art b/src/template/player.art index 8faf71d..6791df4 100644 --- a/src/template/player.art +++ b/src/template/player.art @@ -1,52 +1,55 @@ -
-
{{@ icons.play }}
-
-
-
- - +
+
+
{{@ icons.play }}
-
-
-
-
-
-
-
-
- - {{@ icons.loading }} - -
-
+
+
+ +
-
- - - 00:00 / 00:00 - -
- -
-
-
+
+
+
+
+
+
+
+
+ + {{@ icons.loading }} +
- {{ if options.audio.length > 1 }} - - {{ /if }} - - +
+ + - 00:00 / 00:00 + +
+ +
+
+
+
+
+
+ {{ if options.audio.length > 1 }} + + {{ /if }} + + +
+