换个拉风的音乐播放器,咱也文艺一把

这次的主角是SoundManager 2 / 360° Player
用的 JavaScript + Canvas UI .
而在此之前,我博客一直用的是Audio Player 里的flash播放器播放mp3 ,如之前有文章《不用audio-player插件也播放mp3》等。另外之前尝试过的yahoo webplayer加载上有些慢,因此没有使用它。
HTML的audio 标签目前兼容性还不太好(对后面带中文参数的Mp3url,发现只有IE9下面可正常播放。如我上一篇文章中的例子)。

另外,我之前文章中所用的

1
 

形式的内容并不需要做任何调整。因为是short tags实现的缘故,因此,这里可以很方便的把它用另外的形式来展现,这就是WP的强大之处。
我只需要把代码稍微修改一两行,再在主题中加上js和css,整站所有音乐全部会调用这个很cool很简洁的播放器了 :twisted:
另外,我还给短代码添加了一个属性: title 用于显示歌曲的名称。因此,后期的mp3可以用这种方法添加:

1
 

并且,前期的内容不受任何影响。


SoundManager 2项目主页:http://www.schillmania.com/projects/soundmanager2/

目前我将此效果集成到我的超级插件包:Hacklog Package里面了,后期如有时间就把它做成个小插件,可以随意选择各种cool的样式~~
当然,如果你现在就想要一个插件,这里我也找到一个:WPaudio MP3 Player


用一首经典老歌来做测试吧(在ff , opera , chrome ,ie 现行版本下测试通过):
点击可播放/暂停,拖动圆环可快进/倒退

梅艳芳 – 似是故人来(低音质版):

高音质版:


我这个是SoundManager 2 / 360° Player,另外还有更给力更cool的,如图:

可到这里亲自体验一把~~

更多
13 Responses Post a comment
  1. 荒野无灯

    这个播放器你用来做什么都可以,API非常强大。
    这个等有时间了就推出哈~~

  2. 飓风

    请问博主 什么时候推出独立版的插件而不是集成Hacklog Package的

    还有就是这个播放器 好像不能调节声音大小吧

  3. Demon

    你是技术 性的文艺青年呀亲。

  4. 潜行者m

    这种音乐播放器真的很简洁,很好看哈。真期待未来网络的变化。现在再去看看一些很老的站点,再看看现在比较现代的网站,设计风格等都发生了翻天覆地的变化哈,以后会网络会更美的。

  5. 潜行者m

    html5如此强大,我好像曾在某一个角落里看过一篇文章中的一段话,html最终发展的非常高级,可以取代php等脚本语言。荒野前辈,你觉得呢?我最近也在学习html5有问题会多多请教你的!

  6. 柠檬

    关键是外链的音乐地址很难找了

  7. iShare

    音乐链接失效了,放不出来

  8. 荒野无灯

    沙发~~
    ps: berniecode-animator.js 文件不可用dean edwards’s js packer来压缩(虽然它压缩比很高),我是用yuicompressor 压缩的。貌似google还有一个js压缩工具,有时候再尝试下。

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS