js实现简单音乐播放器

时间：2021-05-26

本文实例为大家分享了js实现音乐播放器的具体代码，供大家参考，具体内容如下

效果图：

可播放暂停继续播放，进度条可拖动，时间展示，声音调节

完整代码（直接拿来用）

<!DOCTYPE html><html><head><meta charset="utf-8"><title>audio功能开发</title> <style> * { margin:0; padding:0 } .music-range { width:350px; height:10px; background:#2386e4; border-radius:5px; -webkit-appearance:none; margin:0 auto; cursor:pointer } .music-range::-webkit-slider-thumb { width:15px; height:15px; background:#fff; border:1px solid #f18900; cursor:pointer; border-radius:5px; -webkit-appearance:none } a { text-align:center } </style></head><body> <div class="music-all"> <audio class='music-audio' controls> <source src="http:///demo/jqueryaudio201903252328/jq22.mp3" type="audio/mpeg"> </audio> <div>总时间 <span class='music-max'></span> </div> <div>时间 <span class='music-cur'></span> </div> <input class='music-range' type="range" min=0 max=100 value=0 /> <div>音量<span class="music-voice">1</span></div> <button class='music-play'>播放</button> <button class='music-no'>停止</button> <button class="music-btnd">声小</button> <button class="music-btne">声大</button> <div class="music-animation"><span class="music-span"></span></div> <div class="music-list"></div> </div> <script src="js/jquery-1.10.2.js"></script> <script src="js/audio.js" type="text/javascript" charset="utf-8"></script> <script> var audios = document.getElementsByClassName("music-audio")[0];var vol = audios.volume;audios.controls = false;$('.music-play').on('click', function () { audios.play(); var duration = audios.duration; $('.music-max').html(timeleng(duration)); $(".music-animation").addClass("play-an"); $(".music-range").attr({ 'max': duration }); function timer() { var t = parseInt(Math.round(audios.currentTime)); $(".music-range").val(t); $('.music-cur').text(timeleng(t)); t = parseInt(audios.currentTime); if (t < duration) { setTimeout(timer, 1000); } else { clearTimeout(timer); } } timer();});$('.music-no').on('click', function () { audios.pause(); $(".music-animation").removeClass("play-an");}) audios.onended = function () { $(".music-animation").removeClass("play-an")};$('.music-btnd').click(function () { vol = vol > 0 ? (vol * 10 - 1) / 10 : 0; audios.volume = vol; console.log(vol) $(".music-voice").html(vol)})$('.music-btne').click(function () { vol = vol < 1 ? (vol * 10 + 1) / 10 : 1; audios.volume = vol; console.log(vol) $(".music-voice").html(vol)})$(".music-range").on('change', function () { audios.currentTime = this.value; console.log(this.value) $(".music-range").val(this.value);}); function timeleng(time) { var m = 0, s = 0, ms = '00', ss = '00'; time = Math.floor(time % 3600); m = Math.floor(time / 60); s = Math.floor(time % 60); ss = s < 10 ? '0' + s : s + ''; ms = m < 10 ? '0' + m : m + ''; return ms + ":" + ss;}$(".music-qd").on("click", function () { var nameid = $(".input-text").val(); console.log(nameid) $.ajax({ type: "get", dataType: 'jsonp', success: function (d) { console.log(d) }, error: function (d) { console.log(d); } });}) </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章