0

I want to play audio every second as it is clock so wanted to insert a ticking sound .

Is there any way to achieve that without a trigger as clock should always be automatic .

Here is code which works on trigger and running:

<audio id="audiotag1" src="Sounds\clock tick.mp3" preload="metadata" controls></audio>
<button onclick="trigger()">Start</button>

function trigger(){
setInterval(clockRunner, 1000);
  function clockRunner(){
    var audioElement = document.getElementById('audiotag1');
    audioElement.play();
  }
}

Here is code which is without trigger but not running :

setInterval(clockRunner, 1000);

function clockRunner() {
  var audioElement = document.getElementById('audiotag1');
  audioElement.play();
}
<audio id="audiotag1" src="Sounds\clock tick.mp3" preload="metadata" controls></audio>

Error showing is :
Uncaught DOMException: play() failed because the user didn't interact with the document first.

Here is the question referring to the problem(Error) but solution provided is for video and they can be play muted and have visual content

Thanks for help in advance

Rana
  • 2,500
  • 2
  • 7
  • 28
  • 1
    https://stackoverflow.com/a/52963693/4384238 – DemiPixel Oct 06 '21 at 21:19
  • 5
    Try calling the `setInterval()` from a button click handler. You *cannot* play audio just when the page has loaded, for good reasons. – Bergi Oct 06 '21 at 21:19
  • Yes you are right but as you know when we open any channel in YouTube 1 video always play with audio . Whether you open with bookmark or direct in new window or incognito , it always auto play with audio . Know that YouTube is out of the leagues – Rana Oct 06 '21 at 21:36

3 Answers3

0

You cannot use document.getElementById (audio element) and js together to just use it and .play, that doesnt work, but this should

function play() {
var audio = new Audio('Sounds\clock tick.mp3');
audio.play();
}
setInterval(play, 1000)

In the string just use your source. :)

Kyl Bar
  • 29
  • 3
  • The first code is running alright but the problem is with 2nd one and I already tried the method you mentioned – Rana Oct 06 '21 at 21:33
0

Looks like there's a relevant post that just popped up. (Source: https://stackoverflow.com/a/62720714/9303612)

A couple of weeks ago I tried exactly what you intend to do, however, after a lot of research I realized this is nearly impossible now. For example in Chrome (I don't know if also in other browsers) you cannot autoplay sounds/videos unless one of these points is accomplished:

  • The user interacts with your website (click on any part of your site).
  • The user added your website to the home screen (mobile).
  • The user has crossed the media interaction index (MEI) threshold.
  • Your website is in the Google whitelist for autoplaying (such as Youtube).
Bobby_Cheh
  • 689
  • 5
  • 11
  • Oh I didn't notice someone posted an answer equivalent to this just before I posted :P If I find something new I shall update my answer – Bobby_Cheh Oct 06 '21 at 21:36
  • I tried this method but as stated in question have to use a trigger and audio is running fine in first part (with trigger) – Rana Oct 06 '21 at 21:42
  • I updated my answer. According to this other post, as well as what someone else on this post has said, this isn't possible (for security reasons?). Years ago this was possible! – Bobby_Cheh Oct 06 '21 at 22:41
  • 1
    I think you wanted to say user experience instead of security because after trigger it is playing but wanted to run without it which will be bad user exp. – Rana Oct 06 '21 at 22:46
  • Yes! That makes more sense :) – Bobby_Cheh Oct 06 '21 at 23:16
0

I would like to say this is worth a shot

<audio id="audiotag1" preload="metadata" controls>
<source src="Sounds\clock tick.mp3" type="audio/mpeg"> 
</audio>
<button onclick="triger()">Start</button>

Also wanna mention you have a type, where it says audioElement.play you put an extra space, making it audioElement .play which could have thrown an error.

Kyl Bar
  • 29
  • 3