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>
谢谢分享感谢大佬!!!
页:
[1]