试图让音频首先开始播放答案

【问题标题】：Trying to get the audio to start playing first试图让音频首先开始播放
【发布时间】：2018-11-22 18:15:41
【问题描述】：

如何让音频在此处开始播放？

我正在尝试在单击之前先播放音频。我该怎么做？我尝试了不同的东西，但无法弄清楚。这之后的代码是它最初的工作方式。

(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function getButtonContainer(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
    }

    function getPlay(button) {
      return button.querySelector(".play");
    }

    function getPause(button) {
      return button.querySelector(".pause");
    }

    function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

    function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
    }

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
        if (isPlaying(button)) {
          showPlayButton(button);
        }
      });
    }

    function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
    }

    function getAudio() {
      return document.querySelector("audio");
    }

    function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
        player.setAttribute("src", src);
      }
      player.play();
    }

    function showButton(button, opts) {
      if (opts.playing) {
        showPlayButton(button);
      } else {
        showPauseButton(button);
      }
    }

    function pauseAudio(player) {
      player.pause();
    }

    function manageAudio(player, opts) {
      if (opts.playing) {
        pauseAudio(player);
      } else {
        playAudio(player, opts.src);
      }
    }

    function togglePlayButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
        playing
      });
      manageAudio(player, {
        src: button.getAttribute("data-audio"),
        playing
      });
    }

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
  }());

原来是这样工作的：

https://jsfiddle.net/pezuLqvo/143/

(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");

    function getButtonContainer(el) {
      while (el.classList.contains("playButton") === false) {
        el = el.parentNode;
      }
      return el;
    }

    function hideAllButtons(button) {
      button.querySelectorAll(".play, .pause, .speaker").forEach(hide);
    }

    function getPlay(button) {
      return button.querySelector(".play");
    }

    function getPause(button) {
      return button.querySelector(".pause");
    }

    function showPlayButton(button) {
      const play = getPlay(button);
      hideAllButtons(button);
      show(play);
      button.classList.remove("active");
    }

    function isPlaying(button) {
      const play = getPlay(button);
      return play.classList.contains("hide");
    }

    function pauseAllButtons() {
      const buttons = document.querySelectorAll(".playButton");
      buttons.forEach(function hidePause(button) {
        if (isPlaying(button)) {
          showPlayButton(button);
        }
      });
    }

    function showPauseButton(button) {
      const pause = getPause(button);
      pauseAllButtons();
      hideAllButtons(button);
      show(pause);
    }

    function getAudio() {
      return document.querySelector("audio");
    }

    function playAudio(player, src) {
      player.volume = 1.0;
      if (player.getAttribute("src") !== src) {
        player.setAttribute("src", src);
      }
      player.play();
    }

    function showButton(button, opts) {
      if (opts.playing) {
        showPlayButton(button);
      } else {
        showPauseButton(button);
      }
    }

    function pauseAudio(player) {
      player.pause();
    }

    function manageAudio(player, opts) {
      if (opts.playing) {
        pauseAudio(player);
      } else {
        playAudio(player, opts.src);
      }
    }

    function togglePlayButton(button) {
      const player = getAudio();
      const playing = isPlaying(button);
      showButton(button, {
        playing
      });
      manageAudio(player, {
        src: button.getAttribute("data-audio"),
        playing
      });
    }

    function playButtonClickHandler(evt) {
      const button = getButtonContainer(evt.target);
      togglePlayButton(button);
    }

    function initButton(selector) {
      const wrapper = document.querySelector(selector);
      wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
  }());

【问题讨论】：

只需将属性autoplay添加到音频播放器即可。
那行不通。我已经试过了。
按播放后你的音频还在播放吗？
是的，但我试图让它在按下任何东西之前播放。此代码的设置方式不同。 jsfiddle.net/pezuLqvo/142 音频应该在被点击之前首先开始播放。
必须有办法做到这一点，即使我使用的是普通的 mp3 流。仅仅因为它是 shputcast 不应该有所作为。也许其他人能够弄清楚。

标签： javascript audio html5-audio

【解决方案1】：

您的侦听器基于 click 事件，通过 <svg class="play hide"... 仅应用 CSS 样式而不发生任何事件。

你需要重写initButton()函数并检查播放器状态

function initButton(selector) {
  const wrapper = document.querySelector(selector);
  wrapper.addEventListener("click", playButtonClickHandler);

  if (isPlaying(wrapper)) {
    manageAudio(getAudio(), {
      src: wrapper.getAttribute("data-audio"),
      playing: false
    })
  }
}

【讨论】：

能否提供一个 jsfiddle 来说明您对代码所做的更改？
仅在initButton() 中更改，但在此处jsfiddle