NGSBWG-WW/js/audio.js

/**
 * 音频播放控制
 * 根据URL参数中的number，自动加载对应音频并显示播放按钮
 */
(function () {
  // 获取URL参数
  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) {
        return pair[1];
      }
    }
    return null;
  }

  // 获取number参数
  var number = getQueryVariable("m");
  if (!number) {
    console.log("未找到number参数");
    return;
  }

  // 构建音频文件路径
  var audioPath = "./audio/" + number + ".mp3";

  // 创建音频对象
  var audio = new Audio();
  audio.src = audioPath;

  // 检查音频文件是否存在
  audio.addEventListener(
    "canplaythrough",
    function () {
      // 音频文件存在，创建播放按钮
      createAudioButton();
    },
    { once: true },
  );

  audio.addEventListener(
    "error",
    function () {
      // 音频文件不存在，不创建按钮
      console.log("音频文件不存在: " + audioPath);
    },
    { once: true },
  );

  function createAudioButton() {
    // 创建容器
    var audioContainer = document.createElement("div");
    audioContainer.id = "audioContainer";
    audioContainer.style.cssText =
      "position: fixed; bottom: 20px; left: 20px; z-index: 9999; cursor: pointer; width: 40px; height: 40px;";

    // 创建图片
    var audioImg = document.createElement("img");
    audioImg.id = "audioBtn";
    audioImg.src = "./audio/audio.png";
    audioImg.style.cssText = "width: 100%; height: 100%; object-fit: contain;";

    audioContainer.appendChild(audioImg);
    document.body.appendChild(audioContainer);

    // 播放状态
    var isPlaying = false;

    // 点击事件
    audioContainer.addEventListener("click", function () {
      if (isPlaying) {
        // 暂停
        audio.pause();
        audioImg.src = "./audio/audio.png";
        isPlaying = false;
      } else {
        // 播放
        audio.play();
        audioImg.src = "./audio/audioAc.png";
        isPlaying = true;
      }
    });

    // 音频播放完毕
    audio.addEventListener("ended", function () {
      audioImg.src = "./audio/audio.png";
      isPlaying = false;
    });
  }
})();