基于vue的音乐播放器

blog
md
项目地址
预览

项目说明

由webpack构建,基于vue全家桶,模块化开发,调用了qq音乐的接口



项目结构

<template>
  <div id="app">
     <header>
        <img>
     </header>
        <main>
      <player></player>
      <section>
      <nav>
          <router-link to='/search'>搜索</router-link>
          <router-link to='/hot'>热榜</router-link> 
          <router-link to='/list'>新歌</router-link> 
          <router-link to='/history'>历史</router-link>    
      </nav>
      <keep-alive >
          <router-view ></router-view>
        </keep-alive> 
      </section>
     </main>
      <footer>
        <BottomBtn></BottomBtn>
      </footer>
      <About></About>
  </div>
</template>

数据流

有空再画

踩的坑

手机chrome100vh多了导航栏的高度

监听window.resize事件,动态计算高度

具体的看这里

移动端audio元素填充了src不会自动播放

填充了数据后加个触发

document.querySelector('#player').play()

性能问题

动画用多了,姑且去掉了些效果(模糊之类的),用了玄学的will-changetransform: translate3d(0, 0, 0),不过感觉好像没啥用,看来得用transform替代一些高宽大小变换

其他想起来再补充

不足

我已经不管兼容性了啊哈哈哈哈哈哈

滥用flex布局;

Polyfill?那是什么?

还是用了jquery

还只用了jq的ajax,因为用axios遇到了些问题。

后续计划

播放模式

歌词及其相关

桌面端布局

收藏列表

本地存储

涟漪效果

ps:谁知道什么时候去做呢,啊哈哈哈哈

以上!

2B小姐姐~


cc长空
1.9k 声望158 粉丝

前端萌新