jQuery音乐播放器

效果图:


实现这个功能需要引入:

TweenMax.min.js

js代码如下:

 $(document).ready(function () {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', $('.active-song').attr('data-src'));


    var tl = new TimelineMax();
    tl.to('.player__albumImg', 3, {
        rotation: '360deg',
        repeat: -1,
        ease: Power0.easeNone
    }, '-=0.2');
    tl.pause();


    $('.player__play').click(function () {


        if ($('.player').hasClass('play')) {
            $('.player').removeCl

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于jQuery库实现的音乐播放器的示例代码: ```html <!DOCTYPE html> <html> <head> <title>jQuery音乐播放器</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ var audio = $("#audio")[0]; var playlist = ["music1.mp3", "music2.mp3", "music3.mp3"]; var index = 0; var mode = 0; // 0:单曲循环 1:随机播放 2:循环播放 // 播放/暂停 $("#play-pause").click(function(){ if(audio.paused){ audio.play(); $(this).html("暂停"); } else { audio.pause(); $(this).html("播放"); } }); // 上一曲 $("#prev").click(function(){ if(mode == 1){ index = Math.floor(Math.random() * playlist.length); } else { index = (index - 1 + playlist.length) % playlist.length; } audio.src = playlist[index]; audio.play(); }); // 下一曲 $("#next").click(function(){ if(mode == 1){ index = Math.floor(Math.random() * playlist.length); } else { index = (index + 1) % playlist.length; } audio.src = playlist[index]; audio.play(); }); // 播放模式 $("#mode").click(function(){ mode = (mode + 1) % 3; if(mode == 0){ $(this).html("单曲循环"); } else if(mode == 1){ $(this).html("随机播放"); } else { $(this).html("循环播放"); } }); // 音乐列表 $("#playlist").click(function(){ var list = ""; for(var i = 0; i < playlist.length; i++){ if(i == index){ list += "<li class='active'>" + playlist[i] + "</li>"; } else { list += "<li>" + playlist[i] + "</li>"; } } $("#list").html(list); $("#list li").click(function(){ index = $(this).index(); audio.src = playlist[index]; audio.play(); $("#play-pause").html("暂停"); $("#list li").removeClass("active"); $(this).addClass("active"); }); }); }); </script> <style> #playlist { cursor: pointer; } #list li.active { color: red; } </style> </head> <body> <audio id="audio" src="music1.mp3"></audio> <button id="prev">上一曲</button> <button id="play-pause">暂停</button> <button id="next">下一曲</button> <button id="mode">单曲循环</button> <div id="playlist">播放列表</div> <ul id="list"></ul> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值