UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

使用h5 audio做的一个音频播放器

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

 50982  356  查看评论 (26)
分享到微信朋友圈
X
使用h5 audio做的一个音频播放器 ie兼容10
 查看演示  立即下载

更新时间：2017/10/30 21:05:12

更新说明：

1. 增加了音频发生错误的错误反馈

2. 取消jQuery

3. 这是新的使用方法

var setConfig = {
    song: [{
        title: 'ツナ?醒',
        src: 'audio/001.mp3',
        cover: 'images/001.jpg'
    }, {
        title: '笑脸',
        src: 'audio/002.mp3',
        cover: 'images/002.png'
    }],
    //错误信息的方块
    error: function(meg) {
        console.log(meg);
    }
};
var audioFn = audioPlay(setConfig);
audioFn.loadFile(true);

更新时间：2017/5/19 上午11:41:46

更新说明：更改事件源绑定，修正进度拖拽后音频卡顿的问题

更新时间：2017/5/3 16:42:17

更新说明：修改了音量调节因浏览器出现滚动条失效的bug

相关插件-音频和视频
查看更多

一个交互式的动画SVG(鼓)工具包

 有关如何使用GSAP和jQuery创建动画和交互式SVG鼓套件的教程。
  音频和视频
 31945  439

时间播放器

 类似视频播放器下面的时间播放控制
  音频和视频
 46304  306

jQuery音乐播放+歌词同步

 简单模仿音乐播放以及歌词同步
  音频和视频
 26512  299

音乐播放器

 音乐播放器插件
  音频和视频
 44076  360

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

    竹子 0
    2019/7/18 12:04:13
    不支持 m4a 格式，很烦调了一天 然后发现用不了 回复
    maldives 0
    2018/12/28 13:04:08
    你这个插件没有下载音频的功能吗？ 回复
    刘玉欢 0
    2018/1/26 12:58:32

    苹果无法获得时长

    回复
    曾微峰 0
    2018/1/10 18:31:20
    感谢分享代码，有个问题，演示的可以正常调整歌曲进度，但是下载的源码在拖动进度条后，歌曲重新播放了，不知道是哪里有问题
        竹子0
        2019/7/18 12:03:19
        哥们同一个问题
    回复
    Ｍr_戴 0
    2017/12/15 14:13:54

    点击暂停，播放，直接跳过一秒！

    回复
    yindonghai 0
    2017/11/29 10:25:34

    在拖动播放进度到最后时候，总是会自动往回跳一点，无法拖动播放进度到最后

    回复
    Ｓmile?? 娴° 0
    2017/11/24 17:17:26

    请问，在苹果机上，没办法一进去就自动播放，是什么原因呀

    回复
    Provence 0
    2017/10/17 14:17:50
    Uncaught (in promise) DOMException: The element has no supported sources.

    怎么解决啊

        一方一方0
        2017/11/3 9:56:27

        下载最新版试试~

    回复
    ╃ 伊人未归 ┽ 0
    2017/8/18 10:48:28
    PHP-济南 0
    2017/8/10 9:20:39

    audio.js:165 Uncaught (in promise) DOMException: The element has no supported sources. 什么问题啊

        一方一方0
        2017/8/20 12:09:11

        音频链接失效了，所以创建 audio 失败

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复