本地添加音乐按钮
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 {
|
export default class MusicList {
|
||||||
constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
|
constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
|
||||||
@ -18,24 +18,28 @@ export default class MusicList {
|
|||||||
//this.audio.addEventListener('timeupdate', () => {
|
//this.audio.addEventListener('timeupdate', () => {
|
||||||
// console.log(this.audio.currentTime)
|
// console.log(this.audio.currentTime)
|
||||||
//})
|
//})
|
||||||
|
//this.audio.addEventListener('error', event => {
|
||||||
|
// console.error('音乐播放器错误:', event)
|
||||||
|
//})
|
||||||
// 本地添加音乐按钮
|
// 本地添加音乐按钮
|
||||||
const input = document.createElement('input')
|
document.body.appendChild(UploadMusic({
|
||||||
input.type = 'file'
|
style: { width: '20rem', height: '5rem', margin: '1rem 2rem' },
|
||||||
input.multiple = true
|
onchange: files => {
|
||||||
input.accept = 'audio/*'
|
for (const file of files) {
|
||||||
input.onchange = event => {
|
const id = 'music' + Date.now()
|
||||||
for (const file of event.target.files) {
|
const { name, size, type } = file
|
||||||
const id = 'music' + Date.now()
|
const reader = new FileReader()
|
||||||
const { name, size, type } = file
|
reader.onload = async event => {
|
||||||
const reader = new FileReader()
|
const arrayBuffer = event.target.result
|
||||||
reader.onload = async event => {
|
this.add({ id, name, size, type, arrayBuffer }) // 添加到列表(默认并不存储)
|
||||||
const arrayBuffer = event.target.result
|
this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
|
||||||
this.add({ id, name, size, type, arrayBuffer }) // 添加到列表(默认并不存储)
|
}
|
||||||
this.like({ id, name, size, type, arrayBuffer }) // 本地缓存的必要条件是喜欢
|
reader.readAsArrayBuffer(file)
|
||||||
}
|
}
|
||||||
reader.readAsArrayBuffer(file)
|
|
||||||
}
|
}
|
||||||
}
|
}))
|
||||||
|
|
||||||
|
|
||||||
// 写入 css 样式到 head
|
// 写入 css 样式到 head
|
||||||
const style = document.createElement('style')
|
const style = document.createElement('style')
|
||||||
style.innerText = `
|
style.innerText = `
|
||||||
@ -72,7 +76,6 @@ export default class MusicList {
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
document.head.appendChild(style)
|
document.head.appendChild(style)
|
||||||
document.body.appendChild(input)
|
|
||||||
}
|
}
|
||||||
add(item) {
|
add(item) {
|
||||||
// 如果ID已存在则不添加
|
// 如果ID已存在则不添加
|
||||||
|
|||||||
@ -40,6 +40,84 @@ export function Avatar(options) {
|
|||||||
return element
|
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) {
|
export function Dialog(options) {
|
||||||
const element = createElement({
|
const element = createElement({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user