Skip to content

wzxyisme/HTML5VisualizationPlayer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5可视化播放器

HTML5VisualizationPlayer


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

查看DEMO  


浏览器支持情况

浏览器 是否支持
谷歌 支持
火狐 支持
IE 支持(不支持AudioContext对象看不到频谱)
Edge 支持
其他内核 未知

使用方法


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 player = new Player();
    player.init({
        autoPlay: true,//自动播放
        effect: 0,//频谱效果,不设置或0为随机变化,1为条形柱状,2为环状声波,3 心电图效果
        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)将随机使用默认颜色
    });
        

注意事项


1、需要在服务器环境下
2、mp3 资源如果存在跨域情况需要对资源进行跨域访问CORS设置,否则获取不到声源

About

HTML5可视化音乐播放器

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 66.1%
  • CSS 27.3%
  • HTML 6.6%