V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lovefc
V2EX  ›  分享创造

新颖的移动端手势操作的 web 音乐播放器

  •  
  •   lovefc · 2020-08-19 15:17:03 +08:00 · 2031 次点击
    这是一个创建于 1561 天前的主题,其中的信息可能已经有所发展或是发生改变。

    新颖的移动端手势操作的 web 音乐播放器

    哈哈哈,又是我,我又来辣,今天分享的是我前年趁着国庆节假日写的一款非常个性的 web 音乐播放器.

    我当时针对的是移动端,看了很多强大的在线播放,反复造轮子也是一件提不起多大兴趣的事情.

    我当时就寻思,能不能利用手势来操作,于是说干就干,立马开始封装 js,写 ui,终于在国庆里面完成了.

    为此,我还单独封装了一个轻量级 JS 原生触屏位置操作插件--Sition,支持移动端上下左右中的滑动判断,还有长按,以及双击事件。

    想要了解的可以去看看:https://gitee.com/lovefc/Sition

    音乐 api 我直接拉取的是网易云,因为平常自己用网易也比较多(老网易云了)

    话不多说,上几张预览图:

    avatar

    avatar

    在线体验 : https://lovefc.gitee.io/fmusic

    使用方法

    双击页面 -> 搜索歌曲

    点击封面 -> 播放暂停

    底部右滑 -> 快进音乐

    底部左滑 -> 倒退音乐

    音量 -> 右侧上下滑动

    单曲 -> 顶部左右滑动

    切换 -> 居中左右滑动

    工具 -> 居中上下滑动

    开源地址

    里面包含了我写的全部 css,js,还有 php 的 api 接口

    GITHUB : https://github.com/lovefc/fmusic

    GITEE : https://gitee.com/lovefc/fmusic

    最后欢迎大家下载使用和 star,谢谢各位巨佬

    4 条回复    2020-08-19 21:31:20 +08:00
    suley
        1
    suley  
       2020-08-19 15:19:26 +08:00
    做的界面效果不错,支持下。
    lovefc
        2
    lovefc  
    OP
       2020-08-19 15:25:06 +08:00
    @suley 谢谢
    jumpalang
        3
    jumpalang  
       2020-08-19 21:11:26 +08:00
    很精美。不错小伙子
    lovefc
        4
    lovefc  
    OP
       2020-08-19 21:31:20 +08:00
    @jumpalang 谢谢大佬夸奖
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4036 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 180ms · UTC 10:19 · PVG 18:19 · LAX 02:19 · JFK 05:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.