微信语音

/* audio */
    .audio-player {
      width: 340px;
      background-color: #94ec69;
      border-radius: 6px;
      padding: 15px 14px;
      display: flex;
      align-items: center;
      position: relative;
      margin: 20px auto;
      cursor: pointer;
    }

    .audio-player::before {
      content: '';
      position: absolute;
      left: -10px;
      top: 40%;
      transform: rotateY(180deg);
      width: 0;
      height: 0;
      border-left: 10px solid #94ec69;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    .audio-icon img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    .audio-time {
      color: #121212;
      font-size: 15px;
      margin-right: 15px;
      letter-spacing: 1.5px;
    }

    .audio-text-btn {
      font-size: 20px;
      color: white;
      cursor: pointer;
      margin-left: auto;
    }

    .audio-text-btn:hover {
      opacity: 0.7;
    }
/* audio */

 <!-- Audio -->
  <div id="audioPlayer" class="audio-player">
    <div class="audio-icon">
      <img id="audioIcon" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4="
        alt="播放图标" />
    </div>
    <div id="audioTime" class="audio-time">2'20"</div>
  </div>
  <!--<div class="audio-text-btn">&#127910;</div>
  </div>-->

  <script>
    // 音频
    const audio = new Audio('https://ws.stream.qqmusic.qq.com/C400002FoKdh2I9Tcl.m4a?guid=949217398&vkey=6D8ECFFEE73E2907C1F32699F05AED68F1E850419696AEEFC38F0A802C41E70E27125CC701CAFC6914B46813C59769471ED037483EDF9951__v2b94c1bd&uin=&fromtag=120032'); 
    const audioPlayer = document.getElementById('audioPlayer');
    const audioIcon = document.getElementById('audioIcon');

    let isPlaying = false;

    audioPlayer.addEventListener('click', () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4=";
      } else {
        audio.play();
        isPlaying = true;
        audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0xMC4yNCAxMS42MTZsLTQuMjI0IDQuMTkyIDQuMjI0IDQuMTkyYzEuMDg4LTEuMDU2IDEuNzYtMi41NiAxLjc2LTQuMTkycy0wLjY3Mi0zLjEzNi0xLjc2LTQuMTkyeiI+PC9wYXRoPjxwYXRoIGQ9Ik0xNS4xOTkgNi43MjFsLTEuNzkxIDEuNzZjMS44NTYgMS44ODggMy4wMDggNC40OCAzLjAwOCA3LjMyOHMtMS4xNTIgNS40NC0zLjAwOCA3LjMyOGwxLjc5MSAxLjc2YzIuMzM2LTIuMzA0IDMuODA5LTUuNTM2IDMuODA5LTkuMDg4cy0xLjQ3My02Ljc4NC0zLjgwOS05LjA4OHoiPjxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMDswOzE7MSIgYmVnaW49IjAiIGR1cj0iMSIga2V5VGltZXM9IjA7LjMzMzsuMzM0OzEiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjxwYXRoIGQ9Ik0yMC4xMjkgMS43OTNsLTEuNzYyIDEuNzZjMy4xMDQgMy4xNjggNS4wMjUgNy40ODggNS4wMjUgMTIuMjU2cy0xLjkyMSA5LjA4OC01LjAyNSAxMi4yNTZsMS43NjIgMS43NmMzLjY0OC0zLjYxNiA1Ljg4Ny04LjU0NCA1Ljg4Ny0xNC4wMTZzLTIuMjM5LTEwLjQzMi01Ljg4Ny0xNC4wMTZ6Ij48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjA7MDsxOzEiIGJlZ2luPSIwIiBkdXI9IjEiIGtleVRpbWVzPSIwOy42NjY7LjY2NzsxIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvcGF0aD48L3N2Zz4=";
      }
    });

    audio.addEventListener("ended", () => {
      isPlaying = false;
      audioIcon.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGQ9Ik0yNi4wMTYgMTUuODA4YzAgNS40NzItMi4yNCAxMC40LTUuODg4IDE0LjAxNmwtMS43Ni0xLjc2YzMuMTA0LTMuMTY4IDUuMDI0LTcuNDg4IDUuMDI0LTEyLjI1NnMtMS45Mi05LjA4OC01LjAyNC0xMi4yNTZsMS43Ni0xLjc2YzMuNjQ4IDMuNTg0IDUuODg4IDguNTQ0IDUuODg4IDE0LjAxNnpNMTkuMDA4IDE1LjgwOGMwIDMuNTUyLTEuNDcyIDYuNzg0LTMuODA4IDkuMDg4bC0xLjc5Mi0xLjc2YzEuODU2LTEuODg4IDMuMDA4LTQuNDggMy4wMDgtNy4zMjhzLTEuMTUyLTUuNDQtMy4wMDgtNy4zMjhsMS43OTItMS43NmMyLjMzNiAyLjMwNCAzLjgwOCA1LjUzNiAzLjgwOCA5LjA4OHpNMTAuMjQgMTEuNjE2YzEuMDg4IDEuMDU2IDEuNzYgMi41NiAxLjc2IDQuMTkycy0wLjY3MiAzLjEzNi0xLjc2IDQuMTkybC00LjIyNC00LjE5MnoiPjwvcGF0aD48L3N2Zz4=";
    });

    document.querySelector('.audio-text-btn').addEventListener('click', () => {
      alert('测试');
    });
  </script>

示例：

2'20"

你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。你好，这是一个从左上角到右下角的弹窗效果！点击图标后弹出。

1

2

3

4

4

5

5

5

56

6

1233333

12134