jQuery多功能音乐播放器特效代码下载



4 15 6



特效描述:多功能 音乐播放器,jQuery多功能音乐播放器特效代码下载

代码结构

1. 引入JS

<script src="src/jquery.min.js"></script>
<script src="src/mjs.min.js?v=2019/12/25"></script>

2. HTML代码

<button id="play">播放</button>
<button id="stop">暂停</button>
<button id="xia">下一首</button>
<button id="shang">上一首</button>
<br /><br />
<button id="da">放大声音</button>
<button id="xiao">减小声音</button>
<br /><br />
<button id="order">随机循环</button>
<button id="order2">单曲循环</button>
<button id="order3">列表循环</button>
<br /><br />
<button id="kaitou">到开头</button>
<button id="zhongjian">到中间</button>
<button id="mowei">到末尾</button>
<br /><br />
<button id="jiakuai">加快</button>
<button id="zhengchang">正常</button>
<button id="bianman">变慢</button>
<br />
<br /><span id="songname"></span>
<br /><span id="pic"></span>
<br /><span id="times"></span>
<p id="lyctext"></p>
<script>
    let musiclist = {};
    // 获取歌单json
    $.ajax({
        url: 'https://mjs.uquhu.cn/api.php?lyc=1',
        type: 'get',
        async: false,
        data: {},
        success: function (data) {
            musiclist = data;
        },
        fail: function () {
            alert('歌单获取失败!');
        }
    });
    // 实例化mjs类库
    let music = new mjs();
    // 歌词显示的回调函数,写在init函数调用前面
    music.lycCallback = (lycText) => {
        $('#lyctext').html(lycText);
    };
    // 切歌的回调,写在init函数调用前面
    music.switchCallback = (attr) => {
        music.autoPlay(); // 可以在这里写 自动播放
        $('#songname').html(attr.title + "-" + attr.author);
        $('#pic').html('<img src="' + attr.pic + '" width="100">');
    };
    music.playVolume(0.5); // 初始音量,写在init函数调用前面
    music.orderMusic(1); // 定义初始循环方式,写在init函数调用前面, 0为列表循环,1为随机循环,2为单曲循环
    // 传入歌曲json,初始化
    // json为多维json
    //[{'title':'歌曲名称','author':'作者','pic':'歌曲封面','url':'播放直链地址'}]
    music.init(musiclist);
    // 获取当前歌曲的播放时间和进度的回调,写在init函数后面
    music.timeCallback = (music) => {
        $('#times').html(music.nowtime + "" + music.alltime);
    };
    // 播放
    $("#play").click(function () {
        music.autoPlay();
    });
    // 暂停
    $("#stop").click(function () {
        music.stopPlay();
    });
    // 随机循环
    $("#order").click(function () {
        music.orderMusic(1);
        alert('开启随机循环成功');
    });
    // 单曲循环
    $("#order2").click(function () {
        music.orderMusic(2);
        alert('开启单曲循环成功');
    });
    // 列表循环
    $("#order3").click(function () {
        music.orderMusic(0);
        alert('开启列表循环成功');
    });
    // 下一首
    $("#xia").click(function () {
        music.nextMusic(function (music) {
            // 播放下一首的事件回调
        });
    });
    // 上一首
    $("#shang").click(function () {
        music.prevMusic(function (music) {
            // 播放上一首的事件回调
        });
    });
    // 放大音量
    $("#da").click(function () {
        let num = 1;
        music.playVolume(num, function (num) {
            console.log('放大音量' + num);
        });
    });
    // 缩小音量
    $("#xiao").click(function () {
        music.playVolume(0.3, function (num) {
            console.log('缩小音量' + num);
        });
    });
    // 跳到开头
    $("#kaitou").click(function () {
        music.playProgress(1);
    });
    // 跳到中间
    $("#zhongjian").click(function () {
        music.playProgress(50);
    });
    // 跳到结尾
    $("#mowei").click(function () {
        music.playProgress(98);
    });
    // 加快速度,最大为200
    $("#jiakuai").click(function () {
        music.playRate(200);
    });
    // 正常速度
    $("#zhengchang").click(function () {
        music.playRate(100);
    });
    // 减慢速度
    $("#bianman").click(function () {
        music.playRate(50);
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 二维码 地图 计算器 计时器 桌面 跳转 步骤 键盘 签到 分享 点赞 投票 雪花 打印 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滑动星星打分 其他更多

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到