html5 audio gui development [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
So I am on the 11th level of my game (plan to have 20-25) and listening to the music that is going to be on the game, over and over, to see if it fits while testing it.
Now I've decided it is time to start working on the media player for it.
I plan to have all the songs on a loop. You can skip songs or go previous and play/pause. There also will be a button to mute.
I know how to add the GUI to the screen and use the mouse clicks to trigger methods. Just wondering what is the most used way instead of building it from nothing and wasting time.
I am just wondering if there a tut/guide as I plan on pulling an all-nighter to do this.
I'm in college but it's summer so decided this would be great for my portfolio.
Here's a demo vid of it. It is my first game so go easy! :)

Use the <audio> tag. It has functions such as .play() and .pause(). To switch tracks, you'd modify the src to point to a different audio file, much in the same way you'd switch the src of an <img> tag to display a different image.
EDIT: I just watched video and I want to play this thing. The twist on the normal platformer (all the platforms being ones that you slowly fall through) could either be really awesome or really frustrating. I'm leaning towards awesome but that remains to be seen!

Related

Continuously playing sticky-footer music player for wordpress website for all pages [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I bought 3 music players (1) tPlayer - audio player (with playlist) for WP, (2) Sticky Shoutcast & Icecast Radio Player — «Line-R» w/ AAC+ , (3) AIO Radio Station Player - Shoutcast, Icecast and more) from codecanyon.net
I want a sticky-footer music player fixed to the bottom of the browser window that runs even we browse inside a website which includes that player like in sound cloud website(not exactly)
but with 'now playing' and a 'popup' options in it. Is there any possible way to achieve this with the above mentioned players..or any other suggestion is appreciable..
please help me solve this..this is really important to me.
You can use Advanced AJAX Page Loader Wordpress plugin
https://wordpress.org/plugins/advanced-ajax-page-loader/
to make your Wordpress website behave like a SPA and create a sticky player in the footer, that will not interrupt playing while you navigate your website.
I can tell you that it's 100% working solution as I have experience creating Internet-radio websites that use it.

How to keep banner animations running while changing webpages [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
To start off, here's a picture of the website project:
http://i.imgur.com/FbdUmpp.png
The top image is one of the cycling images in the website banner. I'd like to make my website a bit more polished. When the user navigates to a new webpage, the banner animation will restart. I was wondering how I could stop this from happening.
How can I keep the banner from restarting when a user switches a
webpage?
What's the exact name of what I'm trying to accomplish? (I can't seem to find any information about this subject.)
My knowledge is limited to HTML, CSS, a little bit of PHP and JavaScript. I don't mind learning a new language in order to achieve this.
Thanks in advance!
Well the animation restart is due to the content being reloaded when you land on the new page. There is no way around that specifically. However you can change the content on the screen without actually navigating away. Look into AJAX to accomplish this. Have an AJAX call get the new data that you want to view and place it on the current screen in place of the old data. This way you will still get the new information and the animation of the banner will continue without stops or restarting.

Which is more efficient: html video or javascript slider? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just wondering about following situation:
Description
Pictures slider placed on website by: HTML5 Video element or Javascript slider (It does matter which solution will be chosen: raw javascript or libraries).
Assumptions
One slider in fixed place on a website
Fixed numbers of pictures in a slider
Pictures don't change
Browser support doesn't matter
Parameters influencing on result
Usage of CPU/GPU
Loading speed
Weight of file or files
Ready time to show
Problem to solve
Which way is more efficient?
Have guys any experiences in this topic?
Cheers!
Ok, based on the sliders you referred to at jssor.com, it seems like a slider should be much more efficient in most ways. If there are no animations except when the user is moving the slider, then there should be no CPU/GPU usage either (assuming the slider is implemented efficiently). A video playing in the background will always use some CPU/GPU. If it's a format that most GPUs can accelerate (MPEG-2 or H.264), the CPU usage may be very small, but you can't count on that.
Of course most of those slider demos have animations going all the time. That will use CPU too.
As far as loading/startup time, a few JPEG images will usually be much smaller than a video file. The slider should start up at least as fast as a video, and use a lot less bandwidth.
As usual, the only final answer to "which is more efficient?" is "Try both and see."

Need Solution With Identical Results To Flash - HTML 5 Compliant [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I used to build sites that used flash for background animations & background movies while having regular (selectable) Html text on top.
Flash really fit the bill because it allowed for streaming movies WITHIN the animation itself, so you could layer things really well and get a very creative website going.
BUT FLASH IS DYING...
So I'm here to ask you good folks what solution (or solutions) should I look towards that can accomplish the same goals in modern non-Flash platforms (web-mobile etc).
It would need to:
Create animations that can have within them movie files. I would need to control the movies from the animation, not just slap them as background
NOTE: I have looked at all kinds of plugins etc for putting a movie as a site background, but this would NOT yield the result I need as it is just a movie playing and cannot be scripted as an animation in Flash was. I also checked out Adobe Edge. It comes closest to what I need but I have found no way of working with video inside it the same as in Flash - Please correct me if I'm wrong.
I'm no Javascript maestro by any means. I would dive deeper into it but I'm not sure it would work for what I need.
I hope I have not confused you with this long winded question and I thank you for your help.
Try the html canvas element. You can pipe video to the canvas using a hidden video element and any animation you can think of is possible through canvas. Since these are dom elements, you can of course put other HTML on top of them.
For good canvas frameworks check: http://www.backslash.gr/content/blog/webdevelopment/7-10-javascript-canvas-frameworks
I'm personally a big fan of paper.js and processing.js

Craps Game Simulation [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am creating a craps game using javascript. I have pretty much everything working the way its supposed to be, just have to make a few minor adjustments, but the part I am stuck on is creating some type of type function, or possibly using the setTimeout(). I have a .wav file playing the sound of dice being rolled, but what I would like to do is have the text if the user won or lost appear after the sound of the dice being rolled(after the .wav file stops playing the dice rolling sound).
I don't think you can detect any event about the sound file ending.
You should play the sound, then start a setTimeout function with a hard-coded duration.
Eg:
setTimeout(diceRolled,3000); //these are millisecond -> 3 seconds wait
// ..........
function diceRolled(){
//do anything here
}
I would say the "correct" answer is to use html5 audio and bind to its various events - you can get the file's duration, detect if a sound has finished playing, get its current playback location, etc.
However, it's fairly complicated to use, and I wouldn't recommend it for this purpose or for starting javascripters.
http://html5doctor.com/html5-audio-the-state-of-play/
http://www.html5rocks.com/en/tutorials/webaudio/intro/

Categories