小麦子 发表于 2024-12-17 12:26:07

HTML5 可视化音乐播放器(可拖拽上传)




最近某音乐播放器越来越迷,以前下载的本地音乐没有版权也不能播放了...... 特在网上找了个音乐播放插件,但功能实在简陋,特在其基础上进行了改造,并对其扩展至layui版(兼容)。 感兴趣的可以去查看源代码,仅供个人学习使用~

<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<link type="text/css" rel="stylesheet" href="./css/player.css" />
<style type="text/css">
</style>
</head>
<body>
        <div class="player-audio" id="player"></div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.7.6/layui.min.js" type="text/javascript"></script>
<script src="https://www.jq22.com/demo/playAudio202211072249/js/player.js" type="text/javascript"></script>
<script src="https://www.jq22.com/demo/playAudio202211072249/js/player.layui.js" type="text/javascript"></script>
<script type="text/javascript">
        //         $(function() {
        //                 window.myPlayer = new Player();
        //                 myPlayer.init({
        //                         elem : '#player',
        //                         autoPlay : true,
        //                         showAdd : false,
        //                         playList : []
        //                 });
        //         });
</script>
<script type="text/javascript">
        $(function() {
                layui.use(function() {
                        window.layer = layui.layer;

                        window.myPlayer = new LayPlayer();
                        myPlayer.init({
                                elem : '#player',
                                autoPlay : true,
                                showAdd : false,
                                playList : []
                        });
                        myPlayer.appendList([ {
                                title : 'playAudioDemo.mp3',
                                artist : '55.60KB',
                                size : 57024,
                                mp3 : './playAudioDemo.mp3'
                        } ]);
                        myPlayer.replay();
                });
        })

        //         function initMethod() {
        //                 if (window.myPlayer)
        //                         return;
        //                 window.myPlayer = new Player();
        //                 myPlayer.init({
        //                         elem : '#player',
        //                         autoPlay : true,
        //                         effect : 0,
        //                         color : null,//"#01ff01",
        //                         showAdd : false,
        //                         add : addMethod,
        //                         button : {
        //                                 prev : true,
        //                                 play : true,
        //                                 next : true,
        //                                 volume : true,
        //                                 progressControl : true,
        //                                 add : true,
        //                                 menu : true,
        //                         },
        //                         error : function(e) {
        //                         },
        //                         event : function(e) {
        //                                 console.log(e);
        //                         },
        //                         energy : function(value) {
        //                                 //console.log(value);
        //                         },
        //                         playList : []
        //                 });
        //         }
</script>

</html>

mm5588 发表于 2024-12-20 21:45:21

谢谢分享感谢大佬!!!
页: [1]
查看完整版本: HTML5 可视化音乐播放器(可拖拽上传)