diff --git a/public/cloud.html b/public/cloud.html
new file mode 100644
index 0000000..e3c792f
--- /dev/null
+++ b/public/cloud.html
@@ -0,0 +1,60 @@
+
+
+
+ Cloud Upload Icon
+
+
+
+
+
+
diff --git a/public/music.js b/public/music.js
index 13618d3..ce5eed4 100644
--- a/public/music.js
+++ b/public/music.js
@@ -1,4 +1,4 @@
-import { Span, Button, List, ListItem } from './weigets.js'
+import { Span, Button, List, ListItem, UploadMusic } from './weigets.js'
export default class MusicList {
constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@@ -18,24 +18,28 @@ export default class MusicList {
//this.audio.addEventListener('timeupdate', () => {
// console.log(this.audio.currentTime)
//})
+ //this.audio.addEventListener('error', event => {
+ // console.error('音乐播放器错误:', event)
+ //})
// 本地添加音乐按钮
- const input = document.createElement('input')
- input.type = 'file'
- input.multiple = true
- input.accept = 'audio/*'
- input.onchange = event => {
- for (const file of event.target.files) {
- const id = 'music' + Date.now()
- const { name, size, type } = file
- const reader = new FileReader()
- reader.onload = async event => {
- const arrayBuffer = event.target.result
- this.add({ id, name, size, type, arrayBuffer }) // 添加到列表(默认并不存储)
- this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
+ document.body.appendChild(UploadMusic({
+ style: { width: '20rem', height: '5rem', margin: '1rem 2rem' },
+ onchange: files => {
+ for (const file of files) {
+ const id = 'music' + Date.now()
+ const { name, size, type } = file
+ const reader = new FileReader()
+ reader.onload = async event => {
+ const arrayBuffer = event.target.result
+ this.add({ id, name, size, type, arrayBuffer }) // 添加到列表(默认并不存储)
+ this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
+ }
+ reader.readAsArrayBuffer(file)
}
- reader.readAsArrayBuffer(file)
}
- }
+ }))
+
+
// 写入 css 样式到 head
const style = document.createElement('style')
style.innerText = `
@@ -72,7 +76,6 @@ export default class MusicList {
}
`
document.head.appendChild(style)
- document.body.appendChild(input)
}
add(item) {
// 如果ID已存在则不添加
diff --git a/public/weigets.js b/public/weigets.js
index af05b60..ef73bd7 100644
--- a/public/weigets.js
+++ b/public/weigets.js
@@ -40,6 +40,84 @@ export function Avatar(options) {
return element
}
+export function UploadMusic(options) {
+ return createElement({
+ ...options,
+ style: {
+ width: '100%',
+ height: '10rem',
+ backdropFilter: 'blur(5px)',
+ backgroundColor: '#fcfcfc',
+ borderRadius: '1em',
+ border: '1px solid #f1f1f1',
+ position: 'relative',
+ userSelect: 'none',
+ cursor: 'pointer',
+ ...options.style
+ },
+ onclick: event => {
+ // 临时创建一个input触发input的点击事件
+ const input = Input({
+ type: 'file',
+ multiple: true,
+ accept: 'audio/*',
+ style: {
+ display: 'none',
+ },
+ onchange: event => {
+ const files = Array.from(event.target.files)
+ if (files.length === 0) return
+ options.onchange(files)
+ }
+ })
+ input.click()
+ },
+ children: [
+ // 绘制一个云朵上传图标(放弃了...)
+ createElement({
+ style: {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: '4rem',
+ height: '4rem',
+ backgroundColor: '#ff1414',
+ borderRadius: '50%',
+ opacity: 0.2,
+ boxShadow: '-35px 10px 0 -10px, 33px 15px 0 -15px, 0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
+ background: 'currentColor',
+ },
+ children: [
+ createElement({
+ style: {
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: '2rem',
+ height: '2rem',
+ backgroundColor: '#fff',
+ borderRadius: '50%',
+ boxShadow: '0 0 0 6px #fff, -35px 10px 0 -5px #fff, 33px 15px 0 -10px #fff;',
+ }
+ })
+ ],
+ })
+ ]
+ })
+ //Input({
+ // ...options,
+ // type: 'file',
+ // multiple: true,
+ // accept: 'audio/*',
+ // style: {
+ // display: 'none',
+ // ...options.style
+ // }
+ //})
+}
+
// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
export function Dialog(options) {
const element = createElement({