本地添加音乐按钮
This commit is contained in:
parent
81bd58c37a
commit
cd6b0bc4e5
60
public/cloud.html
Normal file
60
public/cloud.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Cloud Upload Icon</title>
|
||||
<style>
|
||||
.cloud-icon {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cloud-icon::before,
|
||||
.cloud-icon::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
animation: cloud 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.cloud-icon::before {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: -30px;
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.cloud-icon::after {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: -50px;
|
||||
right: -50px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes cloud {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translate(10px, -10px);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="cloud-icon"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -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已存在则不添加
|
||||
|
||||
@ -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({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user