蜘蛛牵引切歌

八足蜘蛛结网牵引专辑封面，在队列与播放区之间连续搬运，搭配真实专辑图片和可操作的本地播放控件。

音乐交互六框架TypeScript

演示

点击队列，或用上一首、下一首观察蜘蛛牵引和归还封面。支持本地搜索、暂停、进度调整、喜欢与添加歌曲；演示不播放音源。

npm install react react-dom gsap@3.12.7

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom gsap@3.12.7

SpiderMusicPlayer.tsx

正在加载代码…

App.tsx

import { SpiderMusicPlayer } from "./SpiderMusicPlayer";

export default function App() {
  return <SpiderMusicPlayer />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.track` 本地队列中初始或更新的歌曲索引。	`number`	`0`
`options.playing` 控制本地播放进度计时。	`boolean`	`true`
`options.onTrackChange` 蜘蛛完成切歌后调用一次，返回新歌曲索引。	`(index: number) => void`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`1080`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`