可视化音乐播放器(原创)

 查看演示  website  立即下载

更新时间：2020-05-11 09:50:58 版本：1.4.0

更新说明：优化谷歌、火狐等内核浏览器，不能自动播放的情况。设置自动播放时，新增用户点击播放交互

更新时间：2020-03-03 09:57:08

注：请在服务端预览，本地预览mp3资源存在跨域情况需要对资源进行跨域访问CORS设置，否则获取不到声源

HTML5可视化播放器

HTML5可视化播放器是一款能将音乐播放绘制出频谱的播放器

使用方法

1、引入播放器player.css与player.js

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

2、HTML中加入下面标签,用于创建播放器

<player></player>

player外面可以用一个div包起来控制它的大小

3、调用生成播放器

var play = new Player();
play.init({
    autoPlay: false, //自动播放,2018年1月谷歌浏览器不支持自动播放，谷歌浏览器设置true不能自动播放
    effect: 0, //频谱效果,不设置或0为随机变化,1为条形柱状,2为环状声波
    color: null, //颜色 16进制颜色代码,不设置或设置为空(空字符或null)将随机使用默认颜色
    button: { //设置生成的控制按钮,不设置button默认全部创建
        prev: true, //上一首
        play: true, //播放,暂停
        next: true, //下一首
        volume: true, //音量
        progressControl: true, //是否开启进度控制
    },
    event: function(e) {
        //这是一个事件方法,点击控制按钮会到此方法
        //参数:e.eventType 事件类型
        //参数:e.describe 事件详情,或参数
        //e.eventType  prev: 点击上一首,next：点击下一首,play:点击 播放/暂停
        console.log(e);
    },
    energy: function(value) {
        //此时播放的能量值,时刻变化
        //console.log(value);
    },
    playList: [ //播放列表
        {
            title: "Kandy", //音乐标题
            album: "", //所属专辑
            artist: "", //艺术家
            mp3: "music/Kandy.mp3", //音乐路径
        },
        {
            title: "Paper Gangsta", //音乐标题
            album: "", //所属专辑
            artist: "", //艺术家
            mp3: "music/PaperGangsta.mp3", //音乐路径
        },
    ]
});

改变频谱效果

播放时如果想要改变效果调用下面方法

player.change({
    effect: 3,//效果 0 还原随机, 1 为条形柱状,2为环状声波,3 心电图效果
    color: '#4395ff'//颜色 16进制颜色代码,不设置或设置为空(空字符或null)将随机使用默认颜色
});

PREVIOUS:
NEXT:
jQuery坦克大战小游戏
jQuery时间区间选择插件Date Range Picker