audio音频播放器(原创)

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

 28650  348  查看评论 (19)
分享到微信朋友圈
X
audio音频播放器(原创) ie兼容10

更新时间:2019-05-19 21:24:01

更新说明:新增添加歌曲功能,可通过参数调节是否添加后直接播放,详细方法请看源码介绍

更改:封面图片命名方式改为歌手-歌名,防止歌名冲突问题


更新时间:2019/3/31 上午10:33:31

更新说明:新增随机播放功能

插件封装,使用方法为以下方式:

第一步,引入jQuery

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

第二部,引入PsAudio.css文件和PsAudio.js文件

<link rel="stylesheet" href="css/PsAudio.css"> 
<script type="text/javascript" src="Javascriptt/PsAudio.js"></script>

第三部页面添加div#audio容器

<div id="audio" ></div>

第四部使用psAudio()方法来初始化该播放插件

<script>      
    psAudio(); 
</script>

该函数接受一个对象,可以传入以下属性audioSrcFile, audioHttp, audioSrc, audioLic, audioBg, audioListBg,对应传参规则详见目录下的index.html文件。


更新时间:2019/3/27 上午10:37:11

更新说明:

1. 添加歌词实时显示功能

2. 添加播放列表功能

3. 歌曲改为外链方式引入

4. 歌曲名称超出播放器宽度会自动左右轮播


需要引用jQuery,需要请下载进行阅读

相关插件-音频和视频

个性暗音乐播放精简优化版

基于@星云发布的个性暗音乐播放精简优化版
  音频和视频
 23181  283

js音频可视化插件Wavesurfer.js

Wavesurfer.js是一个javascript库用于创建交互式可操作音频可视化,使用Web Audio和HTML5 Canvas技术。可以显示当前音频的声波
  音频和视频
 62434  347

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 140495  616

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 20090  242

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

    进击的旺旺 0
    2019/10/12 14:29:59
    点击菜单就刷新到 第一个 数据 ,怎么能 点击菜单 不刷新 数组数据?
        进击的旺旺0
        2019/10/12 15:57:34
        已经自行解决了。
    回复
    泽狗 0
    2019/8/13 0:03:05
    怎么设置进入网页自动播放阿 回复
    phantasm 0
    2019/5/16 22:01:45

    作者能不能加上个功能,页面切换 继续播放。
    判断key是否空,获取当前播放时间,放到key里面,切换页面读取key时间继续播放。这个是大概思路。

    if (localStorage.getItem('bgm_gds') != null) {
        bgm.setAttribute('value', localStorage.getItem('bgm_gds'));
        bgm.innerHTML = '<source src="bgm/' + localStorage.getItem('bgm_gds') + '.mp3" type="audio/mpeg">';
    } else{ 播放第一首歌}

    这里怎么修改成 打开页面就播放音乐?求教!谢谢作者大大!
    这个播放器真的很棒!!!

        passerma0
        2019/5/20 14:04:36
        周末吧,才有时间
        phantasm0
        2019/5/21 11:36:22
        嗯 ,期待你的升级!!
        passerma0
        2019/5/21 22:04:11
        不过如果用你那种方式的话切换界面时虽然可以继续播放不过中间还是会有一段加载过程会没有声音
        phantasm0
        2019/5/23 10:29:58
        嗯,是要缓存下,只能期待你解决!
        还有,能不能加载外部歌单,网易音乐。
        passerma0
        2019/5/23 16:59:50
        用框架就好了,不会有缓存
    回复
    孤久?则安 0
    2019/5/11 20:10:26
    JSer 0
    2019/5/9 22:02:35
    这个封面加载是不是没弄好啊?感觉考虑得不到位,封面命名重复不就凉凉了……为什么不弄得和加载歌曲和歌曲名一样,挨个传进去,那样就不存在命名重复的问题了!!!
        passerma0
        2019/5/9 23:45:48
        嗯嗯是的,确实还有很多要改进的地方
        JSer0
        2019/5/10 0:20:31
        弄了半天,才发现这个问题!js和jquery的基础知识只记得一点了,哥们可以改进一下封面的这个问题不?还有就是实现向歌单中添加新曲目,设置第二个参数状态为true后,实现新增之后立即播放新增曲目,蛮喜欢这个插件的,就是好这两个点不是太理想……
        passerma0
        2019/5/10 9:27:04
        等我有时间吧
        passerma0
        2019/5/18 22:23:15
        改完了,在等审核,或者你可以去GitHub下载,插件官网有地址
    回复
    asdasdqweqe 0
    2019/3/29 23:35:47
    zzx6602261 0
    2019/3/29 15:40:40
    这个太好了哈哈哈哈哈哈 回复
    areyouOk 0
    2019/3/26 10:00:12
    除了颜色不太好看,其它都很好。
        passerma0
        2019/3/26 10:24:48
        嗯嗯是的,谢谢大神的建议
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复