I have a set of php/html pages that contain buttons that when the mouse is over it plays a sound.
Now I want that when the user clicks on another button, it silence all pages of the site or put them with sound, depending if the sound was already on or not.
I already have an html code that allows me to silence the page, but it only work on the page itself, if I go to any other page or go back to that page they have sound. And I don't want that...
This is an exemple of the code in one of the pages:
<audio preload id="sombotao">
<source src="audio/somBotao.ogg"></source>
</audio>
<img src="img/exemple.png" onMouseOver="document.getElementById('sombotao').play()" />
I've tried using javascript, but it didn’t work.
I even tried with php using sessions, but since my experience is very limited it also didn’t work.
Can anyone help me? Where can I find a piece of code as an example?
Thanks in advance.
JV
This is completely possible. One solution will take a combination of server side and client side code. Your pages must have code that automatically checks the server every so often for updates to the volume level (This works similar to automatically updating comment feeds or stock tickers, but is so much simpler).
Your solution will look like this:
Step 1
Page 1:
Sound is playing
Page 2:
Sound is playing
Step 2
Page 1:
User clicks the mute button.
Page 1 "posts" via ajax to volumecontrol.php
Step 3
Page 1:
Query volumecontrol.php and find page is muted, continue muting
Page 2:
Query volumecontrol.php and find page is muted, change current volume to "mute"
A little more explanation
Think of this like a whiteboard at a doorway. As people enter and leave the room, they leave instructions for the other members. Members do not have to be present when a message is written, they only have to see the board every so often to coordinate with the other members of the group.
One important part of this whole process is that you will set the volume according to something unique to the user (i.e. a session variable).
Another key is that you use Ajax to push settings to a page in PHP and use Ajax to regularly check the server for updates to that setting.
Related
This question already has answers here:
Playing sound from INACTIVE browser tab
(2 answers)
Closed 12 months ago.
I have a site where the user can log in and can start and get calls. The login is automatic after the first time, so they can get to the contacts page without interacting with the site other than opening it. It's a site that automatically starts on the computers of the customers, just so they can receive or start calls, hence they might not even interact with the site.
When they receive a call, a background music starts, like this:
var audio = new Audio('ringtone.mp3');
audio.play();
Of course it does not work unless the customer pressed at least a button or hovered over something on the site, or anything like that. I am wondering if it's possible to start background music without user interaction? I understand it is no longer possible because people do not want annoying ads to play, but I'm wondering if there is a still working solution. Or can I somehow ask for their permission like for notifications? I would ask for it once during the first login, then it would get saved.
Edit:
It is not an SPA. Also my problem is not that it does not play sound when the tab is inactive. The problem is that there's a restriction on sounds which prevents JavaScript from playing sounds unless the user did anything on the site, interacted with it (hovering over a button, clicking a button, or anything). The user does not necessarily interact with the site because it starts up automatically, hence the problem when there's an incoming call.
Not sure if the OP's website is a SPA, if your using React, and using something like React-Router etc, this is a SPA (Single Page Application).
Playing Audio automatically in a normal browser window without some form of user action is blocked by most browsers. (sound policy).
Now the reason I asked the OP if his website was a SPA, these work well as Web App's, and Web Apps have a slightly different sound policy. aka, been able to play audio without user interaction.
So how do you make your website into a Web App,..
Easy, you tell the browser :)
For example in Chrome, under more tools, there is an option that says create shortcut.., this does more than just create a shortcut, it also puts your website in Web App mode.
This also works for mobile's too, eg. on Android there is the option Add to home screen,
And yes other browser have this feature too, but Firefox have decided to remove this feature, so it's not a browser I will use, or recommend to my customers anymore. Whats happening with Mozilla, they seem to have been taken over by stubborn dev's. Shame!!
So if the OP website is a SPA, all he has to do is use the create shortcut, and auto start this.
There are other benefits to making into a Web App too, like not having the address bar at the top etc. But again Mozilla have decided that's not what users want or need, thanks Moz, bye bye now..
What if's not SPA?.. ps, SPA just means there is no normal navigation / page loading. (might not have been obvious from my previous explanation).
Ok, things get a little bit more tricky. The OP mentions he auto-starts these in the morning, now the only issue here this prevents any user interaction, so obviously the sound policy kicks in.
So another idea, using something like puppeteer you could start the app, place a button on your website, that could play a startup sound, or even a silent mp3. You could then instruct puppeteer to click this button.
I'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?
I was creating a website for my YouTube channel since I make music for YouTube and etc.
I was wondering how can I add a mp3 player for my website without it stopping on every page reload.
I want the mp3 player to constantly playing no matter how many pages it goes on.
One way I only think this will work is having it on another server side. But the thing is that 1 person isn't going to want to listen to the same music on the website.
I'm able to just broadcast the song on one page but I want users to listen to my music and browse other pages as well.
Can someone please show me how to do this? Thanks :)
There's two ways you can do that:
The correct way would be for you to set up all your site content as AJAX calls, so your MP3 player would be at the top and untouched. It requires programming knowledge and some planning to make all the AJAX calls correctly.
The easy way, although i don't recommend because it's not W3C valid, is to put a frame at the top with your mp3 player, so it won't postback with the rest of the page when you navegate.
load your content into a div/iframe and have the mp3 playing on the main page.
You'd be best off to go with a div loaded content, iframes are going out the way of the dinosaur.
<----- Main Page -----> Music Player here
>----- ContentDiv -----< Load content into the div
<----- Main Page -----> Or Music Player here
or with an html mockup, Content being what you load your pages into, Music Player being on the main page and never being reloaded.
<head></head>
<body id="mainpage">
<div id="musicplayer"></div>
<div id="content">
</div>
</body>
The answer the Mike has suggested would be a very SEO unfriendly method, if thats a concern, but the only way I can think of to have the music completely unbroken. If you don't mind the break in music between page loads, then you would need to capture the current play length of the track and then pass that in either a cookie or as a parameter in the url which would require you to montior the user behavior and have a js function bound to all naviagtion links monitoring that.
Weird question !
I was wondering if there was any action a website could do to make the user's screensaver disappear.
I wanted to create kind of an alarm-clock website, but with nice visual effects, and I wished I could make the user leave their screensaver.
Is there any action that wakes up the computer ? Like, I don't know, making the website fullscreen, moving the window around.. Or is the screensaver only and exclusively left through keyboard/mouse events ?
I've read that you can't interact with the screensaver with JS : javascript code to prevent screensaver from starting
But I was hoping something like putting the website fullscreen would wake the computer up.
Nope.
For security reasons, nothing running inside the browser has access to OS-level commands like that.
Simply popping up an alert box won't do it. Going full screen won't work either, and anyway, you can't go full screen on a timer. I just tried and and apparently there are browsers safeguards against it. If you request full screen as a direct result of user interaction like, for example, a click, it goes full screen no problem. But, put the exact same code inside a setTimeout() function and it just doesn't run.
You have two options for an alarm type application:
1) Just do it with sound. Set up an <audio> tag and set it to play on a setTimeout.
2) Chrome apps offer greater access to different things that require more security than a typical web page. I don't know if they allow enough access to do what you're wanting to do, but you can read about it here: http://developer.chrome.com/apps/first_app.html
Hope that helps.
for a website with a focus on audio I need the ability of Background sounds and onclick sounds. I think I am able to integrate that, but I also need a stop/play button and a volume control that works sidewide (that means the site should remember the volume value and if to play or not after page reload or page change).
Does anybody know a method to do that?
The answer to your question is in the tags.
Cookies.
http://www.quirksmode.org/js/cookies.html — this may help.
Just save the cookie named "volume" (for example) every time the volume changes and read it on page load.
You have to use either a Javascript variable that saves the state of the volume or a server side variable.
Remember that there is no way to play the music in background while loading a new page unless you use ajax to load contents.