V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
ClassicOldSong
V2EX  ›  JavaScript

bPlayer - 原生音频播放器的绝佳替代品

  •  2
     
  •   ClassicOldSong · 2016-05-31 22:12:39 +08:00 · 3174 次点击
    这是一个创建于 3127 天前的主题,其中的信息可能已经有所发展或是发生改变。

    GitHub repo

    Demo

    上次在Blyde 的发布帖里提到过 bPlayer ,但那时的 bPlayer 还没有完成我想要实现的功能。最近有空把 bPlayer 更新到了 v0.2.0-alpha ,已经实现了绝大多数预期的功能了,简单地作为原生 audio 的替代品还是足够的,所以先与大家分享一下。

    bPlayer 旨在取代原生 audio 标签以带来更丰富的操作以及更清爽统一的体验,并且不依赖任何库。最简单的用法仅需在页面内引入 bplayer.js 和 bplayer.css 以后,即可自动搜索页面内的 audio 标签并替换为 bplayer 标签。同时还可以通过 JSON 创建播放器,以及使用链式操作进行控制。 bplayer 标签提供了几个与原生 audio 标签行为一致的操作方法,所以绝大多数人都可以轻松上手。

    目前提供了两种显示模式,一种为正常模式,高度为 60px ;一种为苗条(slim)模式,高度为 30px 。当播放器宽度小于 460px 时会自动切换为窄(narrow)模式。对触摸支持良好,已知 iOS 上无法控制音量以及切换静音,这是 iOS 的限制,并非 bug 。

    欢迎各位体验以及提建议提 Issue ,如果愿意的话可以提交 PR 帮助一起开发,谢谢~

    下面放一张截图:

    pic

    最后欢迎各位访问我的博客:C 次元

    7 条回复    2016-06-02 13:20:00 +08:00
    lslqtz
        1
    lslqtz  
       2016-05-31 22:13:10 +08:00
    滋此。
    wdhwg001
        2
    wdhwg001  
       2016-06-01 02:14:13 +08:00 via iPhone
    进度条太小了…
    ghosrt
        3
    ghosrt  
       2016-06-01 11:30:44 +08:00
    Starred 。
    进度条太小+1 ,另外只有一个条状的风格还是感觉少了些什么(遁
    ClassicOldSong
        4
    ClassicOldSong  
    OP
       2016-06-01 17:01:58 +08:00
    @wdhwg001 @ghosrt 进度条在鼠标移过的时候会变宽,平时很窄是为了给文字留空间。。。如果觉得风格太少的话可以手动指定宽度为 60px (正常模式)或者 30px ( slim 模式),这样就得到了一个只有封面,控制按钮还有进度条的播放器了 233
    wdhwg001
        5
    wdhwg001  
       2016-06-01 22:32:42 +08:00 via iPhone
    @ClassicOldSong 道理我都懂,但是为何不用文字的背景做进度条呢?
    ClassicOldSong
        6
    ClassicOldSong  
    OP
       2016-06-02 01:37:55 +08:00
    @wdhwg001 因为 1: 太俗, 2: 影响进度控制
    ghosrt
        7
    ghosrt  
       2016-06-02 13:20:00 +08:00
    @ClassicOldSong 其实比较想要一个卡片式的 Skin ( whispering
    不过现在这个也相当棒了,过两天有空就拿来试试看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   878 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:17 · PVG 06:17 · LAX 14:17 · JFK 17:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.