jQuery播放器总结

1.TweenMax动画库

推荐一个比较好的学习记录

 

2.setAttribute设置属性值的方法

 audio.setAttribute('src', $('.active_song').attr("data-oringe"));

 

3.audio标签的一些特性:

audio.addEventListener("timeupdate", function () {
var duration = this.duration;//获取整首歌的长度
var currentTime = this.currentTime;//当前歌曲播放的时间
var percent = currentTime / duration;
$(".player_duration").css({
    width: parseInt(timeW * percent) + "px"
    })
})

其中timeupdate这个事件是audio标签的特有事件,监听播放时间的变化

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值