1

I am a total beginner at coding. Just have some basic knowledge of HTML and CSS.

I want to create an HTML that includes a local time (e.g. UTC 23:00:12), and I want to make this HTML to auto-play an mp3. file at a specific time (e.g. 23:00:15).

I’ve found a widget clock at the time.is at have embedded into my code at HTML. What I want to do is everyone who opens this HTML would follow the exact time provided by time.is so that the mp3. the file can be auto-played at an exact time (e.g. 23:00:15).

Please anyone would advise what should I do about this?

cheer

Here is the code of the widget from time.is:

<a href="https://time.is/Central,_Hong_Kong" id="time_is_link" rel="nofollow" style="font-size:36px">Time in Central:</a>
<span id="Central__Hong_Kong_z419" style="font-size:36px"></span>
<script src="//widget.time.is/t.js"></script>
<script>
time_is_widget.init({Central__Hong_Kong_z419:{}});
</script>
Nayana Chandran
  • 1,416
  • 1
  • 16
  • 30
WonWon
  • 19
  • 2
  • Does this answer your question? [Time triggers auto-played audio in HTML](https://stackoverflow.com/questions/68014664/time-triggers-auto-played-audio-in-html) – Justinas Jun 17 '21 at 07:26

2 Answers2

1

You can specify like below in audio tag itself, Recently added a new event handler oncanplaythrough.

<audio id="audio2" 
       preload="auto" 
       src="your_mp3_file_path.mp3#t=00:05:10" 
       oncanplaythrough="this.play();">
</audio>
Nayana Chandran
  • 1,416
  • 1
  • 16
  • 30
0

Edited

  1. change the src attribute with your audio path
  2. to play the audio you need to play() method
  3. if you want the audio to start at specific time change the value of audio.currentTime to thr second that you want the audio to start from it and if you wants it to work normally from the start to the end just remove it

HTML

<div id="time"></div>
  <audio controls style="display: none;">
     <source src="audio.mp3" type="audio/mpeg" />
 </audio>

JS

 setInterval(function() {
    var d = new Date(),
        hours = d.getHours(),
        min = d.getMinutes(),
        sec = d.getSeconds();
    if (hours === 20 && min === 38 && sec === 01) {
        var audio = document.getElementsByTagName('audio')[0]
        //add the time in seconds
        audio.currentTime = 60;
        audio.play()
        audio.style.display = 'block'
    }
}, 1000)
JS_INF
  • 467
  • 3
  • 10
  • hi, thanks for the comment Sorry maybe I did not mention clearly. I’ll explain again in points: 1. I need a html that contain a local timer (e.g. US time 20:28:10) 2. I need it can be refreshed itself but not stay still. 3. Whoever that go to the html can see the exactly same time with no difference. (like the website time.is) 4. An audio will be autoplayed in the background while it’s triggered by the local time clock that reach the exact time (e.g. US time 20:28:15) 5. I can be able to set the time in the code so that I can control whenever the audio will be autoplayed. Cheers – WonWon Jun 17 '21 at 07:03
  • 1. To get the local time just remove `UTC` from the methods name because by default `Date()` object get the local time. 2. If you need it to refresh it self just use `setInterval()` method you can find the explanation in w3schools or MDN. 3.i don't know if you wants to get the local time for everyone visit your page or for exact area you make me confused. 4.and if you want to hide the audio you can make it in display none and play it by js and about playing audio at exact time you can create a condition to handle that in `setInterval()`like `if(hours == 20 && min == 28) { //code here}` – JS_INF Jun 17 '21 at 09:57
  • thanks for this I’ve tried sth like that: function myFunction() { setInterval(function(){ alert("Hello"); }, hours == 01 && min == 07)); } but it don’t work out… I tested it with alert first but it wont pop-up at the time of 01:07am. Would you please describe more detail for me? Sorry I am still a total beginner for this kind of language. thanks – WonWon Jun 17 '21 at 17:11
  • Try this ```setInterval(function() { var d = new Date(), hours = d.getHours(), min = d.getMinutes(), sec = d.getSeconds(); if(hours === 20 && min === 38 && sec === 01) { alert( hours + "\n true") } }, 1000)``` 1000 = 1 second but it's in millisecond - but be careful when add a condition try to set the second in your condition because if you forget to add second in condition it's will repeat your code every second untill this minute or hour gone – JS_INF Jun 17 '21 at 19:04
  • great! I tested it works when I type in the time and run and it had a alert popped up. What if I wanna trigger an auto-play of an mp3? should I put this in the code? ` time.addEventListener('click', function() { console.dir(audio); audio.currentTime = 0; audio.play() audio.style.display = 'block' ` that should not be ‘click’ at the function right? many thanks – WonWon Jun 18 '21 at 13:12
  • Thanks you so much:) I’ve added to the code. It indeed triggered the audio but the audio could not be auto-played. I can only saw the audio bar appear at the exact time. – WonWon Jun 18 '21 at 14:28
  • Remove `audio.currentTime = 60;` from the code and try again – JS_INF Jun 18 '21 at 14:33
  • I’ve removed that what it won’t autoplay the audio. Will the `audio.autoplay = true ` works? thanks – WonWon Jun 18 '21 at 14:46
  • it's the ERROR `Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first` [check this link ](https://stackoverflow.com/questions/58846042/getting-play-failed-because-the-user-didnt-interact-with-the-document-first)anyway the user should to interact with the document first so if you clicked anywhere in the document first it's will work but if you refreshed the page and waited for the audio to play it's won't play untill you interact with the document first – JS_INF Jun 18 '21 at 17:08
  • even if you set `audio.autoplay = true` it's won't work – JS_INF Jun 18 '21 at 17:12
  • I see, I get what you mean. So what if I can set a function (maybe a button?) first to trigger the whole `setInterval(function)` ? Will it be possible? and how can I do that? thanks – WonWon Jun 18 '21 at 17:29