創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商,新人活動買多久送多久,劃算不套路!
成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)的開發(fā),更需要了解用戶,從用戶角度來建設(shè)網(wǎng)站,獲得較好的用戶體驗。創(chuàng)新互聯(lián)公司多年互聯(lián)網(wǎng)經(jīng)驗,見的多,溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司,打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)公司,不只是建站,我們把建站作為產(chǎn)品,不斷的更新、完善,讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。這篇文章主要介紹js實現(xiàn)音樂播放器的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
效果圖:
可播放暫停繼續(xù)播放,進度條可拖動,時間展示,聲音調(diào)節(jié)
完整代碼(直接拿來用)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>audio功能開發(fā)</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://www.jq22.com/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>
本文標題:js實現(xiàn)音樂播放器的方法-創(chuàng)新互聯(lián)
文章網(wǎng)址:http://aaarwkj.com/article38/ieesp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計、品牌網(wǎng)站設(shè)計、網(wǎng)站維護、App開發(fā)、域名注冊、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容