mercredi 6 mars 2019

Javascript audio playing at specific times of day, and randomly choosing from a number of different audios

I am working on a website for a friend, just about to apply audio, and have setup this test page to figure it out first.

So the idea is that at specific times of day (9 - 9.05pm, 8.55 - 9am, etc), if you refresh the page, a short audio piece will play once.. this audio piece will be randomly selected from a selection of 2 or 3, with a 'blank' track in there, so sometimes it will be silent. If you refresh again within the time slot another audio will play.

Here is the code..

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>

And a link to the test page..

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

So it is working on my side, but my friend said it is not playing for her on her side. Where am I going wrong ?

Thanks !




Aucun commentaire:

Enregistrer un commentaire