Chrome starting audio playing not working - javascript

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.

Related

Allow audio.play() on safari for chat app

Since Apple disabled the ability to autoplay audio via HTMLMedia​Element​.play()
in javascript without user interaction, I am not sure how I should play a sound when a user gets a chat message before interacting with the DOM after the page loads.
socket.on("receive message", data => {
const receiveSound = new Audio("1.mp3");
messages.push(data);
receiveSound.play();
});
I tried playing the audio element on a mousemove event. I also tried to fake a click() through an element on a React ref to initially activate it. Neither solutions worked.
Is there a way to autoplay an audio element if there is a message coming in? It must be possible since YouTube can autoplay videos without interaction.
Every time I try to play the audio, I get this error:
Unhandled Rejection (NotAllowedError): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
There is a way that you can make Safari play a sound without necessarily having to allow it there in the site settings.
According to the webkit documentation, it makes explicit that the user needs to interact to play the audio/video, in this case by the click, but he does not say that after you play some audio he lets you play any other audio then without any problem. With this in mind, you can for example run some script on your index.html where it will play your notification audio without any volume and then you can run it again without any problem, as in the example below:
function unlockAudio() {
const sound = new Audio('path/to/your/sound/notification.mp3');
sound.play();
sound.pause();
sound.currentTime = 0;
document.body.removeEventListener('click', unlockAudio)
document.body.removeEventListener('touchstart', unlockAudio)
}
document.body.addEventListener('click', unlockAudio);
document.body.addEventListener('touchstart', unlockAudio);
To run your code after this workaround, just do it this way:
function soundNotification() {
const sound = new Audio('path/to/your/sound/notification.mp3');
const promise = sound.play();
if (promise !== undefined) {
promise.then(() => {}).catch(error => console.error);
}
}
Remembering that the above example is just to show you an alternative, there are several ways you can solve this problem, just keep in mind that you will need to play some sound before...
What solved it for me was using HowlerJS
from Docs:
howler.js is an audio library for the modern web. It defaults to Web
Audio API and falls back to HTML5 Audio. This makes working with audio
in JavaScript easy and reliable across all platforms.

Remember If Music Player is Playing

So I have an HTML5 audio player which plays a radio stream, but upon page refresh or new page it will stop playing and have to be manually started again,
I was wondering how i would get it to remember if a user had clicked play ?
A lil Google and i found out that it's to do with cookies however i know nothing about cookies so any help will be great thanks!
With your clarification in comments that you're not specifically looking for a cookie-based solution, the best solution to this would be to use localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
One way you could do this:
// When the music player starts
window.localStorage.setItem("isPlaying", true);
// When the music player stops
window.localStorage.removeItem("isPlaying");
// When the page loads
if (window.localStorage.getItem("isPlaying") {
// Trigger the music player to start
}

Audio is unable to play via javascript on some mobile browsers

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.

Android not playing html5 audio from an interval

I'm trying to play audio using a HTML5 Audio tag on my phone.
I've loaded the sound but when I run the .play() command, nothing happens.
I made the default controls visible so that I test by pressing that play button and that one works and the sound plays.
I've also tried playing the sound by executing the javascript from the address bar and that works aswell.
The code I'm using to play looks something like this:
setInterval(function(){
if(blahblah){
document.getElementById("player").play();
}
},500);
To make sure that it even tries to play the sound, I put an alert after it, like this:
setInterval(function(){
if(blahblah){
document.getElementById("player").play();
alert("Played!");
}
},500);
I saw the alert, but no sound was played.
Thanks for any help :)
Most mobile devices will only allow you to play audio when it is the result of a user interaction. If you put your play code into a button click event, it should work (assuming you have no other bugs in the code), but the device is preventing your audio from playing from inside setInterval because it doesn't think it has the user's permission to play it.
What I do now, and I admit this is a workaround, is I play and immediately stop the audio inside my button click event, and then call setInterval. It works--for now--because the device thinks it has been granted permission to play that audio by the user, even if I trigger it later. The code inside my button click event looks like this:
document.getElementById("player").play();
document.getElementById("player").pause();
setInterval(function(){
document.getElementById("player").play();
}, 500);
Keep in mind that on mobile, it may not play nearly as smoothly as it does on your computer. Seek alternative approaches where possible.

Javascript pause all other Vimeo Videos

I would like to have it so that when I play one Vimeo video the others on the page will be paused.
I tried using the froogaloop API but had little help.
Using the current code I got it working so that when I switch tabs I can pause all videos. Now I want to make it so that when I play one video, the others pause.
Right now the event listeners for detecting 'play' are not working correctly. I believe that is because they need to be in the $(document).ready() but they are stuck in the first <script> area, encapsulated in $(function(){ }) which I believe is preventing it from interacting.
The code can be found here: www.proclinica.com/preview
This is the code I modified to control the vimeo and you can see the event listeners work here: http://jsfiddle.net/GxwEX/5/
Can someone at least help me get the event listeners to work on the proclinica website?
First of all, I'm not exactly sure what you're trying to do that isn't working. In your code (on your site), you have this:
$('.client_logo').click(function() {
post('pause');
});
When I click one of the logo's, any running videos seem to pause just fine.
If you're trying to pause all playing videos when another is started by the user; I don't think I've seen anywhere in your code (either in the JSFiddle or on the site) where you're trying to do that. If you have; can you show us what you've tried to far?
And finally, just to answer at least one part of your question... $(...) is actually just a nice shortcut for $(document).ready(...).
Edit:
From the documentation:
If you're embedding and controlling multiple players on a page, you can give each player a player_id to tell them apart:
http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer
If you've set it, this player_id is passed along to any event listeners, like so:
function onMessageReceived(e) {
var data = JSON.parse(e.data);
var player_id = e.player_id;
// Do stuff
}
You can use this to identify which video was started, and restart it after you've paused the others.

Categories

Resources