音乐播放暂停

音乐播放暂停

html

    <audio src=""></audio>
    <img src="xxx" alt="wang" />
    <img src="xxx" alt="zhe" />
    <img src="xxx" alt="r" />
    <img src="xxx" alt="y" />

css

img {
        cursor: pointer;
      }

js

 // 获取图片
      var img = document.querySelectorAll("img");
      //   获取音乐
      var audio = document.querySelector("audio");
      //   能个音频对象吧
      //zz
      var obj = {
        wang: "https://sharefs.ali.kugou.com/202112222008/83590f2afa1598f442faad745533c10e/KGTX/CLTX001/e5578e4d59688c73c0cbda1952c51650.mp3",
        zhe: "https://sharefs.ali.kugou.com/202112222111/5ba1e3d652c95a9f01cc3b9d2147a73e/G203/M07/1F/05/a4cBAF5eVriARO3gAEY5zXPVvDs411.mp3",
        r: "",
        y: "",
      };
      //   循环获取的图片
      for (var i = 0; i < img.length; i++) {
        img[i].onclick = function (i) {
          // 这个i是当你点击时候获取用的而不是循环时候的i
          // 他们没有什么关系
          // target这个用处特别大
          var is = i.target;
          switch (is.alt) {
            case "wang":
              if (audio.paused) {
                console.log();
                //三元判断当audio内容和对象里的wang相等那就输出空白
                audio.src == obj.wang
                  ? ""
                  : audio.setAttribute("src", obj.wang);
                audio.play();
              } else {
                audio.pause();
              }
              break;
            case "zhe":
              if (audio.paused) {
                audio.src == obj.zhe ? "" : audio.setAttribute("src", obj.zhe);
                audio.play();
              } else {
                audio.pause();
              }
              break;
            case "r":
              if (audio.paused) {
                audio.src == obj.r ? "" : audio.setAttribute("src", obj.r);
                audio.play();
              } else {
                audio.pause();
              }
              break;

            case "y":
              if (audio.paused) {
                audio.src == obj.y ? "" : audio.setAttribute("src", obj.y);
                audio.play();
              } else {
                audio.pause();
              }
              break;
          }
        };
      }

注意：以上都是参考即可