user6569908 user6569908 - 4 months ago 6
HTML Question

I need help getting autoplay to work via [getElementById]

My code: https://jsfiddle.net/m656xw8s/24/

I've been trying to get autoplay to work, can someone show me what the correct code would be? Using the code I provided. Using [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

Set the autoplay then load.

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

Update:

        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/

Comments