用JS写音乐播放器的基础功能的代码是什么

lewis 1年前 (2024-04-04) 阅读数 5 #技术

在这篇文章中我们来了解一下“用JS写音乐播放器的基础功能的代码是什么”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

主要功能：快进、快退、暂停、上下一首、禁音、鼠标控制音量、自动下一首、显示歌名

<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
    // 第一个选项 Autoplay policy 设置为 no user gesture is required ：谷歌浏览器要调 才可以自动播放
    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'];//音频路径(转码)

    //控制播放 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键关闭
        window.close();
      }

      if (event.keyCode == 39) {//右方向键快进
        yinp.pause();
        if (yinp.currentTime < yinp.duration-5) {//duration:音频总长度  currentTime：音频当前进度（当前长度）
          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] + '';
      }
    };
    //按键松开时播放
    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();
      }
    }

   //鼠标滚轮改变音量大小
    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;//播放时显示歌名
    yinp.onended = function () {//结束时自动下一曲
      if ((i+1)==shu.length) {
        i = 0;
      } else {
        i++;
      }
      yinp.load();//重新加载
      document.getElementById('ss').src = '' + shu[i] + '';//更换音频路径
    }
  </script>
</body>
</html>

效果图：

这篇关于“用JS写音乐播放器的基础功能的代码是什么”的文章就介绍到这了,更多相关的内容，欢迎关注博信，小编将为大家输出更多高质量的实用文章！

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：快看！10个值得收藏的CSS实用小技巧下一篇：在React中，useCallback是一个自定义的Hook，用于优化性能

用JS写音乐播放器的基础功能的代码是什么

版权声明

作者文章