Develop Reference

Chrome starting audio playing not working

If I refresh a URL audio playing works but for the next time onwards its not playing(its playing randomly). I used phaser framework with Javascript.
Here is my code:
function OtpAudio(product)
{
game.load.audio('theme',
['../../../product_assets/'+product+'/audio/eng/OTP.mp3'
]);
var music = game.sound.add('theme');
music.play();
console.log(music);
}
I am trying to call the above function multiple times but it works only for the first time as I mentioned. Please help me on this.

I asume the first time the music plays is after clicking a link or so. And It doesn't play when you reload the site.
The reason is that, browser prevent playing audio without user interaction.
If you check the browser console you can see an error like:
DOMException: play() failed because the user didn't interact with the document first. ...
To prevent this you can check in the create function if this.sound.locked==true, this would mean sound cannot be played, and than you can prompt the user to click/touch/interact/... with the browser, and on the next interaction you start the sound.
Details to the sound locked documentation: https://photonstorm.github.io/phaser3-docs/Phaser.Sound.WebAudioSoundManager.html#locked__anchor
An alternative simpler approach would be to check on any user event, if the audio is playing. importaint check if music.isPlaying == false and this.sound.locked==false and if both match you can call music.play() the music.

game.sound.add('theme', { loop: true });
You can use the above code if you want to play music in a loop.

Loud feedback after HTMLAudioElement is played with JavaScript

I needed a "ding" sound effect for a pomodoro app that I am building, and I found this sound which met my requirements. I play the sound in my application like this:
var audio = new Audio('ding.wav');
audio.play();
My problem is that, while the sound does play, after the sound finishes playing I hear loud, high pitched digital feedback for about a second.
I have not had this issue before when working with mp3s, so to ensure that it was not related to the file type, I tried using a different .wav file from the same website. This file, when played in the same way is not followed by the feedback. Also, the timing suggests that ding.wav has finished playing completely before the feedback starts.
The file that is followed by the feedback does not have any feedback when played through the media player on my computer.
What would cause this kind of audio feedback, and how can I fix it? I have searched on here and looked through the documentation for HTMLAudioElement, but haven't found anything useful so far. I tried lowering the .volume of the element to see if it was related to that, but it didn't make a difference.
If it would be helpful to actually hear what I am hearing, I can make a video and link to it, but I am not sure how else to give an example in e.g., a fiddle, because the audio file is stored locally on my computer.
Update:
I am not sure if this makes the problem clearer, but the issue does appear to be tied to the playing of the sound rather than the audio file itself. Currently, for testing purposes, the playing of the sound is tied to the pressing of a button. If I quickly press the button 5 times in a row the full sound effect will only play fully once (i.e., if I press the button before the sound is finished, the sound is cut off and starts again), but after the sound fades out from the last button press, I will hear one loud feedback beep for each time I pressed the button (i.e., five beeps for five button presses etc.).

How to bypass Chrome disabling autoplay of video's in background tabs

my friends and I are making a website that acts like a radio station called Musare with playlists of YouTube videos that play after each other.
Recently Chrome introduced a new 'feature' that automatically disables autoplaying of videos in background tabs with no option to turn this off. This breaks our site because users don't want to keep going back to the site to start a song. This also broke other big sites, like YouTube playlists, Facebook chat notification sound and a lot of music sharing sites.
By now, a lot of sites have found solutions to bypass this, like dubtrack.fm, YouTube, Facebook and probably some other sites as well.
There is someone working on making an option for it at https://codereview.chromium.org/1414853003/, but that might take weeks or even months for it to be in the main Google Chrome.
If anyone knows how to bypass this, please let me know.
Thanks in advance :)
Already tried:
Starting another video before the current one ends - no success
Messing around with the Player Variables - no success
Other things probably - no success
Extra notes:
We are using the YouTube API. We use YT.Player and the youtubePlayer.loadVideoById(id)
SoundCloud streaming works fine with SC.Stream.
The source code for our project is at https://github.com/Musare/Musare

So I have found out how to bypass it finally, after many hours of trying and researching.
If you just initialize the iframe player of YouTube by using the YT.Player constructor, you can then just use the player variable and use yourPlayerVariable.loadVideoById(id).
You have to first go to the tab for it to start, but after that it will be able to load and play video's without you having to go back to the tab. If you remove and re-add the iframe, you will have to go back for it to start again.

How does Myspace refresh page without stopping music playback?

I have been using the new Myspace for quite some time now, and I am really astonished on their design. It is really elegant and they have taken advantage of many HTML5 features. However there is one thing that, to me, outshines any other functionality and that is how you could navigate through myspace without having to stop the music playback. I noticed this a few days ago while listening to music, I changed the page and the music player would not reload. It would stay on its fixed position and the music would still play, even while the page was refreshing. And even if you log out, when you log back in the music player would play last song you were listening at exactly the time you left it on.
Now long story short, my question is: How do they achieve this? I am guessing they are saving the current track position in a cookie variable or in the local storage as it is playing, but what about the music player? How come it does not stop playing the song when navigating through myspace? Are they using any html5 feature to do this?
*note: I was inspecting their code because I thought they were using the jquery.load() function, but did not find any trace of that

Thanks to the insight given by #putvande, this Myspace feature is achieved using the HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info

Playing html5 audio in ajax response in iOS

After a lot of googling and researching, I have found out that iOS blocks autoplaying of html5 audio and video. Audio and Video can only be played as a response to a click event.
Now, I have another problem. I run a music website with a lot of user generated playlists. After clicking play, I make an ajax request to fetch the track URLs, and then load them and play them. iOS doesn't consider this as a synchronous click event to play music, so the music doesn't start playing on clicking the play button. I have to click on the player control's pause and play buttons to make it start playing (which basically just use pause() and play()).
I just can't think of what to do. Loading all the MP3 URLs before hand before the click event is not feasible. Is there any other way to get this done?

I know this is an ancient question, but for people coming across this there is a straightforward solution which is to play a short, silent sound directly from the click handler. Ideally, this would be a sound file you have already fetched and cached.
After that you'll be able to initiate playback from other handlers, even those without direct user interaction. (such as your AJAX/XHR response)

Okay, after a bit of fooling around and researching, I figured out that the only way to do a playlist fetch and play in one click, is to use a synchronous request instead of an AJAX request. The page will freeze up while the request loads, but it seems to be the only way out.