Аудио Javascript, воспроизводимое в определенное время дня и произвольно выбирающее из множества различных аудио

Question

Я работаю над сайтом для друга, только собираюсь применить аудио, и настроил эту тестовую страницу, чтобы сначала выяснить это.

Таким образом, идея заключается в том, что в определенное время дня (9–9.05, 8,55–9:00 и т. Д.), Если вы обновите страницу, один раз будет воспроизводиться короткий аудиофрагмент… этот аудиофрагмент будет случайным образом выбран из выбор 2 или 3, с «пустым» треком, поэтому иногда будет тихо. Если вы снова обновите в течение интервала времени, будет воспроизводиться другой звук.

Вот код ..

AUDIO TEST !<br />
<br />
Chapel Bedroom @ 8.55 - 9pm<br />
Amazing Song, woodblocks + blank<br />
<br />
Jenny&#39;s Room @ 9 - 9.05pm<br />
Snow, Still a writer + blank<br />
<br />
Kitchen @ 8.55 - 9am<br />
Goosebumps, Rain, Reservation Piece + blank<br />
<br />
Living Room @ 2.05 - 2.10pm<br />
Flute and hidden voice, peacocks, whiterose + blank
<audio id="amazingsong" preload="auto"><source src="http://sarahboulton.co.uk/audio/Amazing Song.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Amazing Song.ogg" type="audio/ogg" /></audio>

<audio id="woodblocks" preload="auto"><source src="http://sarahboulton.co.uk/audio/woodblocks.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/woodblocks.ogg" type="audio/ogg" /></audio>

<audio id="snow" preload="auto"><source src="http://sarahboulton.co.uk/audio/Snow 2016.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Snow 2016.ogg" type="audio/ogg" /></audio>

<audio id="stillawriter" preload="auto"><source src="http://sarahboulton.co.uk/audio/Still A Writer [recording Of Maya Deren].mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/Still A Writer [recording Of Maya Deren].ogg" type="audio/ogg" /></audio>

<audio id="goosebumps" preload="auto"><source src="http://sarahboulton.co.uk/audio/goosebumps.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/goosebumps.ogg" type="audio/ogg" /></audio>

<audio id="rain" preload="auto"><source src="http://sarahboulton.co.uk/audio/rain.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/rain.ogg" type="audio/ogg" /></audio>

<audio id="reservation" preload="auto"><source src="http://sarahboulton.co.uk/audio/reservation piece.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/reservation piece.ogg" type="audio/ogg" /></audio>

<audio id="flute" preload="auto"><source src="http://sarahboulton.co.uk/audio/flute and hidden voice.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/flute and hidden voice.ogg" type="audio/ogg" /></audio>

<audio id="peacocks" preload="auto"><source src="http://sarahboulton.co.uk/audio/peacocks.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/peacocks.ogg" type="audio/ogg" /></audio>

<audio id="whiterose" preload="auto"><source src="http://sarahboulton.co.uk/audio/whiterose.mp3" type="audio/mpeg" /> <source src="http://sarahboulton.co.uk/audio/whiterose.ogg" type="audio/ogg" /></audio>
<script>

//CHAPEL BEDROOM

mySounds = [ 'amazingsong', 'woodblocks', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 20 && 55 <= minutes && minutes <= 59) {
     audioElement.play();
  }

</script> <script>

//JENNYS ROOM

mySounds = [ 'snow', 'stillawriter', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 21 && 0 <= minutes && minutes <= 5) {
     audioElement.play();
  }

</script> <script>

//KITCHEN

mySounds = [ 'goosebumps', 'rain', 'reservation', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 8 && 55 <= minutes && minutes <= 59) {
     audioElement.play();
  }

</script> <script>

//LIVING ROOM

mySounds = [ 'flute', 'peacocks', 'whiterose', 'blank1' ]

  var index = Math.floor(Math.random() * 1000) % mySounds.length;
  var id = mySounds[index];
  var audioElement = document.getElementById(id);

  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();

  if (hours == 14 && 5 <= minutes && minutes <= 10) {
     audioElement.play();
  }

</script>

И ссылка на тестовую страницу ..

http://sarahboulton.co.uk/tests/audio3.html

Так что это работает на моей стороне, но мой друг сказал, что это не играет для нее на ее стороне. Куда я иду не так?

Спасибо!

Answer 1

это сработало для меня (проверено на Mac с Safari и Chromium):

//function to insert autoplay audio
function playFile(fileName){
// append this to the div with id of audio...
$("#audio").append(`<audio autoplay><source src="${fileName}" type='audio/mpeg' /> </audio>`) 
}


//example using jquery onclick
// handle click and add class
$("button").on("click", function(){
  playFile('LINK TO AUDIO FILE GOES HERE')
})

https://jsfiddle.net/o90ghm5s/

Он использует jQuery для вставки звуковых тегов в невидимый div с автовоспроизведениемвключенный.AFAIK, все браузеры все еще уважают автоигру.(опущено время, потому что оно не было связано с проблемой, хотя оно должно работать, если вы просто вызываете функцию в нужное время)

Answer 2

Большинство браузеров не позволяют воспроизводить аудио без вмешательства пользователя (щелчок или касание).Я не уверен, что это проблема здесь, но вы обязательно должны позаботиться об этом.