JavaScript實(shí)現(xiàn)簡(jiǎn)單的音樂播放器

更新時(shí)間：2022年08月14日 12:54:55 作者：致～命～傷

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單音樂播放器的具體代碼，供大家參考，具體內(nèi)容如下

主要功能：快進(jìn)、快退、暫停、上下一首、禁音、鼠標(biāo)控制音量、自動(dòng)下一首、顯示歌名

<html>
<head>
? ? @*不提供音頻*@
? ? <meta name="viewport" content="width=device-width" />
? ? <title>ceshi14</title>
</head>
<body>
? ? <div id="name">
? ? </div>
? ? <div>?
? ? ? ? <audio id="yinp" ? controls="controls"autoplay="autoplay" >
? ? ? ? ? ? <source id="ss" src="~/images/Beautiful%20In%20White.mp3" type="audio/mpeg" />
? ? ? ? </audio>
? ? </div>
? ? <script>
? ? ? ? //在谷歌瀏覽器輸入 ?chrome://flags/#autoplay-policy?
? ? ? ? // 第一個(gè)選項(xiàng) Autoplay policy ?設(shè)置為 no user gesture is required ?：谷歌瀏覽器要調(diào) 才可以自動(dòng)播放
? ? ? ? var i = 0;
? ? ? ? var shu = ['/images/Beautiful In White.mp3', '/images/%e6%b1%aa%e8%8b%8f%e6%b3%b7%20-%20%e5%b9%b4%e8%bd%ae.mp3','/images/%e9%99%88%e6%9f%8f%e5%ae%87%20-%20%e4%bd%a0%e7%9e%92%e6%88%91%e7%9e%92.mp3','/images/%e8%83%a1%e6%ad%8c%20-%20%e5%bf%98%e8%ae%b0%e6%97%b6%e9%97%b4.mp3','/images/%e5%8d%97%e5%be%81%e5%8c%97%e6%88%98%20-%20%e6%88%91%e7%9a%84%e5%a4%a9%e7%a9%ba.mp3','/images/%e5%91%a8%e6%9d%b0%e4%bc%a6%20-%20%e5%91%8a%e7%99%bd%e6%b0%94%e7%90%83.mp3','/images/%e8%83%a1%e5%a4%8f%20-%20%e5%90%8c%e6%a1%8c%e7%9a%84%e4%bd%a0.mp3'];//音頻路徑(轉(zhuǎn)碼)

? ? ? ? //控制播放 currentTime
? ? ? ? window.onkeydown = function (event) {
? ? ? ? ? ? var yinp = document.getElementById('yinp');
? ? ? ? ? ? if (event.keyCode == 32) {//空格控制播放
? ? ? ? ? ? ? ? if (yinp.paused) {//判斷音頻是否暫停
? ? ? ? ? ? ? ? ? ? yinp.play();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? yinp.pause();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if (event.keyCode == 13) {//回車控制是否禁音
? ? ? ? ? ? ? ? if (yinp.muted) {
? ? ? ? ? ? ? ? ? ? yinp.muted = false;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? yinp.muted = true;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? ? ? ? ? if (event.keyCode == 27) {//Esc鍵關(guān)閉
? ? ? ? ? ? ? ? window.close();
? ? ? ? ? ? }

? ? ? ? ? ? if (event.keyCode == 39) {//右方向鍵快進(jìn)
? ? ? ? ? ? ? ? yinp.pause();
? ? ? ? ? ? ? ? if (yinp.currentTime < yinp.duration-5) {//duration:音頻總長度 ? currentTime：音頻當(dāng)前進(jìn)度（當(dāng)前長度）
? ? ? ? ? ? ? ? ? ? yinp.currentTime += 1
? ? ? ? ? ? ? ? } ? ? ? ? ? ??
? ? ? ? ? ? }

? ? ? ? ? ? if (event.keyCode == 37) {//左方向鍵快退
? ? ? ? ? ? ? ? yinp.pause();
? ? ? ? ? ? ? ? if (yinp.currentTime>1) {
? ? ? ? ? ? ? ? ? ? yinp.currentTime -= 1
? ? ? ? ? ? ? ? } ? ? ? ? ? ? ??
? ? ? ? ? ? }

? ? ? ? ? ? if (event.keyCode == 38) {//上方向鍵：上一曲（第一曲沒作用）
? ? ? ? ? ? ? ? yinp.pause();
? ? ? ? ? ? ? ? if (i>0) {
? ? ? ? ? ? ? ? ? ? i--;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? i = 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? yinp.load();
? ? ? ? ? ? ? ? document.getElementById('ss').src = '' + shu[i] + '';
? ? ? ? ? ? } ? ? ? ? ??
? ? ? ??
? ? ? ? ? ? if (event.keyCode == 40) {//下方向鍵：下一曲
? ? ? ? ? ? ? ? yinp.pause();
? ? ? ? ? ? ? ? if ((i + 1) == shu.length) {
? ? ? ? ? ? ? ? ? ? i = 0;
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? i++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? yinp.load();
? ? ? ? ? ? ? ? document.getElementById('ss').src = '' + shu[i] + '';
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? //按鍵松開時(shí)播放
? ? ? ? window.onkeyup = function (event) {
? ? ? ? ? ? var yinp = document.getElementById('yinp');
? ? ? ? ? ? if (event.keyCode == 39) {
? ? ? ? ? ? ? ? yinp.play();
? ? ? ? ? ? }
? ? ? ? ? ? if (event.keyCode == 37) {
? ? ? ? ? ? ? ? yinp.play();
? ? ? ? ? ? }
? ? ? ? ? ? if (event.keyCode == 38) {
? ? ? ? ? ? ? ? yinp.play();
? ? ? ? ? ? }
? ? ? ? ? ? if (event.keyCode == 40) {
? ? ? ? ? ? ? ? yinp.play();
? ? ? ? ? ? }
? ? ? ? }

? ? ? ?//鼠標(biāo)滾輪改變音量大小
? ? ? ? window.onwheel = function (event) {
? ? ? ? ? ? var yinp = document.getElementById('yinp');
? ? ? ? ? ? var pan = 0;
? ? ? ? ? ? if (event.wheelDelta) { ? ? ? ? ? ?
? ? ? ? ? ? ? ? ?pan = ((event.wheelDelta / 150) * 0.01).toFixed(2); ? ? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ? if (event.detail) {
? ? ? ? ? ? ? ? pan = ((-event.detail / 3 ) * 0.01).toFixed(2);
? ? ? ? ? ? }
? ? ? ? ? ? var volume = Number((yinp.volume).toFixed(2));
? ? ? ? ? ? if (volume + Number(pan) > 1 || volume + Number(pan) < 0) {

? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? yinp.volume = volume + Number(pan);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? ? ? function gename() {//歌名
? ? ? ? ? ? var name = document.getElementById('name');
? ? ? ? ? ? var s = decodeURI(shu[i])//解碼
? ? ? ? ? ? var pp = /([^\\/]+)\.([^\\/]+)/i;//正則匹配歌名
? ? ? ? ? ? pp.test(s);
? ? ? ? ? ? name.innerHTML = RegExp.$1;
? ? ? ? }
? ? ??
? ? ? ? var yinp = document.getElementById('yinp');
? ? ? ? yinp.onplay = gename;//播放時(shí)顯示歌名
? ? ? ? yinp.onended = function () {//結(jié)束時(shí)自動(dòng)下一曲
? ? ? ? ? ? if ((i+1)==shu.length) {
? ? ? ? ? ? ? ? i = 0;
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? i++;
? ? ? ? ? ? }
? ? ? ? ? ? yinp.load();//重新加載
? ? ? ? ? ? document.getElementById('ss').src = '' + shu[i] + '';//更換音頻路徑
? ? ? ? }
? ? </script>
</body>
</html>

效果圖：