Can it be done? I've been tryind to find some workarounds for a couple of hours now, like triggering a click event on an undisplayed button after the page loaded or using ngAfterViewChecked, I need to do this because I'm trying to create a game and I want the main menu to have some background music, obviously I'll add the options to mute it and turn up/down the volume later, but I'd really like it to start with it instead of having something that says "ehy click me to turn on the music" coz that would be quite stupid and ugly on the page, what's odd is that like 80% of the times when I re-compile the music starts, but when I reload the page not
Most browsers today require user interaction unfortunately, no way around it. The button could just say "click to start"
https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide
Related
I'm setting up a radio/stream player on a website. The player could be an iframe with/or an object (type="application/x-shockwave-flash") or an <audio> element, inside the document in a sidebar, repeated all along the website. When the stream is playing and you browse thru any link to another site of the website the stream is obviously interrupted because of the loading of the site.
I want the player to keep playing even if I browse to another part of the site thru a link (ex. click on HOME) just like SoundCloud and Hypem do. I know these site are doing it by refreshing the rest of the site with ajax and leaving the player untouched.
My question is, is there another way to make this iframe/object/audio element to keep playing?
Once you have switched to the next page, everything on the original page is destroyed and stops running. There is no direct way around this fact. As you have said, the other sites work by not actually switching pages.
A common way to keep the audio going is to use a popup window for your player. This way, the audio player page is still around. You can even communicate with it from the other pages. (Check out JunoDownload.com for an example.) This is not typically a good method, as many popup blockers simply block all popups. Most popup blockers only block popups initiated outside of a user action though, so if you had a "play" button that launched the popup window, most users would still get it. Another reason this is a bad idea though is because it is a bit of a jarring user experience.
Another way is to simply set your link targets to _blank, opening them in a new tab or window. Just be careful to only do this from links from your player page.
Finally, some sites will continually post playback status to the server. On the next page, if a song was playing on the previous page, a new player will be started at the point in which the last page stopped. This is a bit annoying though, as the music stops for a period of time while that player loads.
http://jsfiddle.net/BC2VC/
I built an extremely simple audio player. Its just a .png in the background-image: of a <button> that uses .toggleClass() to change the background position of the .png showing a pause button.
I used javascript code that I found on a w3 reference which is a function that links the audio players play and pause events to the <button>.
I have three problems...
One, I cant figure out how to get one audio track to stop when the next when is clicked. I only want one track at a time to be able to play.
Two, if you click the play button for track one it switches to a pause button as it should, but then clicking on track two , both track one and two will show pause buttons. I need track one to switch back to a play button when any other play button is clicked, only one track at a time should show the pause symbol.
The third problem is: The code in the jsfiddle link above works to play the audio everywhere Ive tested except in jsfiddle.
here is a link to a page using the same exact code on my godaddy server...
http://liveoilfree.com/wtrclrwtrclr/index3.html
I'd recommend using one <audio> object and change it's source when user presses play on another song.
Use a javascript for-loop to reset all the play buttons except the active one.
Link that might help:
http://www.html5rocks.com/en/tutorials/webaudio/intro/
I have an youtube video playing in a specific frame. After researching a lot and not being able to properly destroy the player when exiting the frame, I decided to put a SoundMixer.stopAll() in all frames that can be used to get out from the youtube one. That makes things right in most of cases, because to access the video again I must click a button that reloads the player and everything gets back to the start. But I have some thumbs on the right side of the page that when clicked open a large image, occupying most of the page and not showing the video button, but they have a close button themselves. When I click the close button that movieclip becomes invisible and the one with the youtube video becomes visible again (what's great in all other cases). The point is: the player kept playing in the background and when I close the image you can see it playing again, but without sound. The only way to make the sound audible again is clicking on the seek bar (because it isn't a flash component itself, differently of the play/pause button) or going to another frame (that not one from the thumbs/images) and coming back. How could I make the sound play again automatically when entering the frame? Help to destroy the player when exiting the frame is also welcome.
I've run into this problem twice in all the site's I've designed and I can't figure out how to fix it. (The flash compiler has not given me any errors for this.)
Here is the link first of all
http://rollingsquare.com/AKJ/akj.html
Once you're in the site click on portfolio and then click on "the excelsior" what happens is that for the first 4-5 clicks it won't do what it's supposed to do and it'll start randomly either stopping at a frame or playing a from a frame. Once it's done it's randomness it all works perfect again, but those initial clicks do not take you anywhere.
This is an externally loaded SWF and I've loaded it with 2 different techniques hoping it was that but that didn't fix it.
I've tried simply placing a UiLoader and linking it and what it is now, a var myLoader.
Anyone run into something like this before?
You should try to be more specific in asking programming questions. I almost took it as a spam link.
Anyway's if I am getting you correct, the initial thumbnail clicks don't load the image.You should probably use individual loader for each of those large images.
I'm hoping that someone may be able to help me out.
My Home page (Home.html) has a link to a mp3player located at (mp3.html)
On the mp3player page there is a link back to Home.html
If the user clicks on the link to the Mp3 player I would like for the music to continue to play even if the link to home.html is pressed.
What I would like to avoid is having multiple tabs from being opened if the user would re-click one of these links.
Also I would like to have the appropriate page to open when it's link is pressed instead of being locked in a tab and not displaying.
The mp3 player isn't affected by being refreshed.
I would prefer not to have different tabs open if at all possible.
This really got me stumped. I've tried different things out only to either be stuck choosing a tab or loosing the music from playing.
Thank you.
You can program your site with AJAX, so index page won't be reloaded but supplemented by content loaded be demand - Google Mail is a good example. Not a task for beginner, though.
You can use HTML frames (see examples) and load index and player at the same time in one tab. Very easy and may fit your needs, but makes your site harder to link to.
I'd go with the AJAX version as well, it's a nicer user experience. If there's a player somewhere in another tab, that's pretty annoying for the user to find if he wants to turn it off or change a track. Check out the Sixtyone and how they're solving the problem.