Question

我一直试图让自动播放工作，有人能告诉我正确的代码是什么吗？使用我提供的代码。使用[ getElementById ]

var player = document.getElementById('player').autoplay; document.getElementById('player').innerHTML = true;

<button id="playButton" style="border:none; width: 200px; height: 200px; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:red;color:blue;" onclick="  
var player = document.getElementById('player').autoplay;
document.getElementById('player').innerHTML = true;
var player = document.getElementById('player').volume='1.0';
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.style.backgroundColor = 'red';
    player.play();
  } else { 
    playButton.style.backgroundColor = 'red';
    player.pause();
  }">
  </button>

<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>

Answer 1

您只需要在音频标签中添加属性自动播放功能，请参阅下面的更新代码;根据您的代码，您将多次重新声明播放器，请参阅下面的更新代码。您可以根据代码点击按钮触发自动播放，您可能需要将javascript代码分隔到按钮，然后触发按钮点击事件中指示的方法。

您需要使用removeAttribute从音频元素中删除自动播放。我在下面添加了有关如何操作的代码。

//player declared outside of the audioPlay method to make it accessible inside the audioPlay method
 var player = document.getElementById('player');

 //auto play set outside playAudio method outside of the button click event method
 player.setAttribute('autoplay', '');
//to set autoplay false uncomment the code below
 //player.removeAttribute('autoplay'); 

//playAudio is triggered on button click event
function playAudio(){
  player.setAttribute('volume', 1.0);

  var button = document.getElementById('playButton');

 if (player.paused) {
    playButton.style.backgroundColor = 'red';
    player.play();
  } else {
    playButton.style.backgroundColor = 'red';
    player.pause();
  }
}

<button id="playButton" style="border:none; width: 200px; height: 200px; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:red;color:blue;" onclick="  
playAudio()">
  </button>


<audio id="player" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>

Answer 2

设置自动播放然后加载。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_autoplay

<强>更新

        document.getElementById('playButton').addEventListener('click', autoPlayToggle);
        document.getElementById('autovolume_range').addEventListener('change', changeVol);
        //Only getElementById once!
        var player = document.getElementById("player");
        var autoplaytext = document.getElementById("autoplay_text");
        var autovolumetext = document.getElementById("autovolume_range");
        //Boolean from localstorage to keep state of the player
        var autoPlayOn = autoplaytext.value = (localStorage.getItem("keepAutoPlay") === "true");
        var setVolumeOn = autovolumetext.value = parseFloat(localStorage.getItem("keepVolume"));
        
        player.volume = setVolumeOn;
        player.autoplay = autoPlayOn;
        player.load();
        
        //Force play if it dosen't autoplay after refresh
        if (player.autoplay == true) {
          player.play();
        } else {
          player.pause();
        }
        
        //Function
        //When the user refreshes the page it will keep the autoplay state
        function autoPlayToggle() {
          if (player.paused) {
            player.play();
            player.autoplay = true;
          } else {
            player.pause();
            player.autoplay = false;
          }
          //Show the state in a text box
          autoplaytext.value = player.autoplay;
          //Save updated state to your local disk
          localStorage.setItem("keepAutoPlay", autoplaytext.value);
        }
        
        //Save state of volume
        function changeVol() {
        	player.volume = this.value;
          localStorage.setItem("keepVolume", this.value);
        }

    <button id="playButton" style="border:none; width: 200px; height: 200px; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:red;color:blue;">
      </button>
    <audio id="player" style="display:none;" >
      <source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
    </audio>
    AutoPlay: <input id="autoplay_text" />
    AutoVolume: <input type="range" step="0.1" min="0.0" max="1.0" id="autovolume_range" />

https://jsfiddle.net/LeroyRon/dtnrdjd5/

我需要通过[getElementById]帮助自动播放工作

2 个答案: