Блог

Главная - Вопросы по программированию - Autoplay.js Анимация и звук при загрузке

Autoplay.js Анимация и звук при загрузке

#javascript #html #css #wordpress

#javascript #HTML #css #wordpress

Вопрос:

Мне нужна функция анимации и воспроизведения звука для загрузки / воспроизведения при загрузке. Он загружается и приостанавливается при нажатии. Однако, когда страница загружается, я бы хотел, чтобы анимация загружалась вместе с воспроизведением аудиофайла.

Я пытался использовать var playing=true; , но, похоже, это не влияет на функцию автозапуска.

 var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

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


//A function to return a random number between a min and a max value
function randomNumber(min, max) {
  number =  Math.floor((Math.random()*(max-min))  min);
  return number;
}

//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 40;
blue = 35;
cyan = 45;
green = 35;
yellow = 45;
orange = 20;
red = 50;

//To start with the equalizer is paused
var playing=true;

// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
  height-=randomNumber(-20,20);
  if (height>100) height=100;
  if (height<2) height=2;
  column.style.height=height   "px";  
  return height;
}


//A Function that will be run every 50ms to animate the equalizer
function animate() {
  if (playing) {
    purple = changeHeight(document.getElementById("purple"),purple);     blue = changeHeight(document.getElementById("blue"),blue); 
    cyan = changeHeight(document.getElementById("cyan"),cyan); 
    green = changeHeight(document.getElementById("green"),green); 
    yellow = changeHeight(document.getElementById("yellow"),yellow); 
    orange = changeHeight(document.getElementById("orange"),orange); 
    red = changeHeight(document.getElementById("red"),red); 
    
    //Repeat this function every 50 ms
    setTimeout(animate, 60);
  }
}

//A Function to play or pause the animation
function play() {
  if (playing) {
    playing=false;
    document.getElementById("button").value="Play"; 
    x.pause(); 
  } else {
    playing=true;
    document.getElementById("button").value="Pause";
    x.play(); 
    animate();
  }
} 
 .equalizer {
  text-align: center;
  margin: 10px auto;
  width: 380px;
}

.column {
  display: inline-block;
  width: 10px;
  margin: 2px;
}

#purple {
  height: 40px;
  background-color: #000000;
}

#blue {
  height: 35px;
  background-color: #000000;
}

#cyan {
  height:45px;
  background-color: #000000;
}

#green {
  height: 35px;
  background-color: #000000;
}

#yellow {
  height: 45px;
  background-color: #000000;
}

#orange {
  height: 20px;
  background-color: #000000;
}

#red {
  height: 50px;
  background-color: #000000;
}

#black {
  display: inline-block;
  height: 120px;
  width: 1px;
  background-color: #ffffff;
    
} 
 <audio id="myAudio">
  
  <source src="https://neue.run-time.co.za/wp-content/uploads/2020/11/Connected-Original-Mix-Melosense.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<script>
var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>
<div class="equalizer" onclick="JavaScript: play();" value="Play" id="button">
  <span class="column" id="purple"></span>
  <span class="column" id="blue"></span>
  <span class="column" id="cyan"></span>
  <span class="column" id="green"></span>
  <span class="column" id="yellow"></span>
  <span class="column" id="orange"></span>
  <span class="column" id="red"></span>
  <span id="black"></span>
  <br />

Комментарии:

1. Привет, IOS не будет автоматически воспроизводить звук (и я полагаю, что то же самое относится и к Android?) — Это требует взаимодействия с пользователем. Вы все еще хотите получить автозапуск на других устройствах?

2. @AHaworth Привет, да, пожалуйста — это нормально, если не на IOS или Android, но я бы хотел, чтобы он автоматически воспроизводился на других устройствах, таких как рабочий стол и т. Д., Пожалуйста 🙂

Ответ №1:

Анимированные полосы и сам звук воспроизводятся при нажатии пользователем эквалайзера. Это достигается путем запуска функции play . Чтобы заставить их воспроизводиться автоматически при загрузке, нам нужно определить событие onload.

Требуется всего пара изменений. Флаг playing должен быть установлен в false изначально и window.onload установлен в play . Вот пересмотренный фрагмент. Обратите внимание, что некоторые системы (например, Safari на IOS) не позволяют автоматически воспроизводить звук, и для запуска требуется некоторое взаимодействие с пользователем. Этот фрагмент был протестирован на Windows10 с Edge, Firefox, Chrome и IE11 и, похоже, все в порядке.

 var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

function pauseAudio() { 
  x.pause(); 
} 
</script>
<div class="equalizer" onclick="JavaScript: play();" value="Play" id="button">
  <span class="column" id="purple"></span>
  <span class="column" id="blue"></span>
  <span class="column" id="cyan"></span>
  <span class="column" id="green"></span>
  <span class="column" id="yellow"></span>
  <span class="column" id="orange"></span>
  <span class="column" id="red"></span>
  <span id="black"></span>
  <br />
<script>
var x = document.getElementById("myAudio");


function playAudio() { 
  x.play(); 
} 

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


//A function to return a random number between a min and a max value
function randomNumber(min, max) {
  number =  Math.floor((Math.random()*(max-min))  min);
  return number;
}

//Initialise starting values
var purple, blue, cyan, green, yellow, orange, red;
purple = 40;
blue = 35;
cyan = 45;
green = 35;
yellow = 45;
orange = 20;
red = 50;

//To start with the equalizer is paused
var playing=false; //WAS true

// A Function to change the height of a column more or less randomly
function changeHeight(column, height) {
  height-=randomNumber(-20,20);
  if (height>100) height=100;
  if (height<2) height=2;
  column.style.height=height   "px";  
  return height;
}


//A Function that will be run every 50ms to animate the equalizer
function animate() {
  if (playing) {
    purple = changeHeight(document.getElementById("purple"),purple);     blue = changeHeight(document.getElementById("blue"),blue); 
    cyan = changeHeight(document.getElementById("cyan"),cyan); 
    green = changeHeight(document.getElementById("green"),green); 
    yellow = changeHeight(document.getElementById("yellow"),yellow); 
    orange = changeHeight(document.getElementById("orange"),orange); 
    red = changeHeight(document.getElementById("red"),red); 
    
    //Repeat this function every 50 ms
    setTimeout(animate, 60);
  }
}

//A Function to play or pause the animation
function play() {
  if (playing) {
    playing=false;
    document.getElementById("button").value="Play"; 
    x.pause(); 
  } else {
    playing=true;
    document.getElementById("button").value="Pause";
    x.play(); 
    animate();
  }
}

window.onload = play;//ADDED 
 .equalizer {
  text-align: center;
  margin: 10px auto;
  width: 380px;
}

.column {
  display: inline-block;
  width: 10px;
  margin: 2px;
}

#purple {
  height: 40px;
  background-color: #000000;
}

#blue {
  height: 35px;
  background-color: #000000;
}

#cyan {
  height:45px;
  background-color: #000000;
}

#green {
  height: 35px;
  background-color: #000000;
}

#yellow {
  height: 45px;
  background-color: #000000;
}

#orange {
  height: 20px;
  background-color: #000000;
}

#red {
  height: 50px;
  background-color: #000000;
}

#black {
  display: inline-block;
  height: 120px;
  width: 1px;
  background-color: #ffffff;
    
} 
 <audio id="myAudio">
  
  <source src="https://neue.run-time.co.za/wp-content/uploads/2020/11/Connected-Original-Mix-Melosense.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>