交互式的唱机

所属分类:媒体-音频和视频

 37132  458  查看评论 (63)
分享到微信朋友圈
X
交互式的唱机 ie兼容10

注:本地预览会有跨域问题,需要在服务端运行

今天我们想分享一个实验性的老式唱机模板。这个想法是为了利用极其可怕的网络音频API,看看我们能做什么。演示从一个初始网格视图开始。点击网格项,一圈扩大,覆盖网格,选择的专辑。现在我们在幻灯片视图中,我们可以浏览记录。一旦我们点击播放按钮,我们加载记录的歌曲,然后展示电唱机。录音机的tonearm移动到正确的位置,音乐开始播放,同时记录每个歌曲有关的资讯,我们可以把tonearm放在一个特定的位置。此外,我们可以添加一些有趣的效果,如发痒乙烯噪声或一些声脉冲响应。

注意:这个演示是高度实验-所以请使用最新的浏览器!

让我们看一看这个演示的不同的效果。

初步的看法是,有一些项目的砌体动力网格偏移一个非对称的外观 :

一旦点击网格项目,我们显示单一记录材料的设计效应不断扩大的隐藏网格圈:

单记录视图之间的幻灯片,我们可以浏览记录。播放按钮被按下后,我们加载歌曲和显示其它信息:


相关插件-音频和视频

jQuery实现Winamp2播放器插件

win95时代的经典音频播放器,现在我们来通过网页来实现这款播放器。怀旧一下过去的时光。
  音频和视频
 28562  291

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 47786  435

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件
  音频和视频
 125476  444

jQuery音乐播放插件jPlayer

简洁的音乐插件jPlayer
  音频和视频
 47021  341

讨论这个项目(63)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    layla 0
    2022/5/18 14:18:31
    下载之后打开网页一直转圈是什么回事,用了火狐浏览器还是不行 回复
    幽燕学子 0
    2021/2/17 10:39:10
    为什么下载到本地图片啥的都不显示,就一个加载圈啊,本来想用这个做一个自己的本地播放器呢。
        西瓜0
        2021/2/17 11:55:41
        需要在服务端运行,本地有跨域问题。
    回复
    橙檬 0
    2020/4/2 14:21:56
    0
    2019/6/28 11:26:32
    这个好酷炫啊
        浪味仙0
        2019/8/29 13:25:00
        感觉很强势
    回复
    陈梦乐 0
    2019/3/13 22:47:27
    qq:2855467173学生真心想学求分享 回复
    罗知水 0
    2019/2/4 10:59:14
    我评论一下就可以了 回复
    a'╃电竞圈-TAO 0
    2018/11/5 23:18:55
    这个真的漂亮 有大佬给分享一下吗 QQ1265509812 想学习一下
    回复
    PrimeYouth 0
    2018/3/20 13:40:40
    请问这个里面的svg文件路径是怎么修改的。。 不然点击播放后的那个页面会出现在原页面 回复
    香水矢车菊 0
    2018/3/12 14:37:11
    iphone的浏览器,就不能旋转了,大神有什么好的解决办法吗 回复
    天线宝宝 0
    2018/1/18 12:59:33
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复