What's the best way to play a sound from my website? - javascript

I know it's generally frowned upon, but in this case I think it might actually be helpful. I want to play a little "ding" sound when a new item is posted on my site. I'll leave the option to turn it off of course.
Now should I do this with JavaScript? Would jQuery be helpful? Or should I use Flash? Looking for something that is widely compatible with different browsers. A link to a code sample or library would be helpful.

Yep, use the jQuery Media plugin - it does exactly that :)

Caveat...I'm not sure if this still works in modern browsers. But what I did in years past was simply write out an embed tag with an audio file as a source, ala:
document.write( '<embed src="some.wav"></embed>');
and the sound would be played when that was added to the page. It was actually used in a chat system and seemed to work ok. That being said, I have no doubt there's more modern, flash or ajaxy ways of doing this. But if you cant find another solution, this might work for ya.

You should probably look into the <audio> tag in HTML5 and then degrade it gracefully to flash/embed. Fore more advanced audio controls, FF4 beta has implemented an entire audio API, docs are here:
https://wiki.mozilla.org/Audio_Data_API
This is probably the direction audio on the web will take, but for wider support you should gracefully degrade it to a flash/embed solution.
Today, I think FF3.5+, Safari3+ and Chrome3+ supports the <audio> tag, but you should double-check codecs for Safari.

Related

Liveweb Plugin for Powerpoint: Support for HTML5 Canvas?

I'm thinking of using the Liveweb plugin for Powerpoint, to embed a web page in a Powerpoint presentation.
Does Liveweb support HTML5 Canvas? Does it support Javascript?
Thanks very much in advance to all for any info.
Shyam Pillai's LiveWeb? It simply embeds an instance of the browser control into your presentation. It doesn't support any web technologies ... just turns the browser loose on them, so it'll depend on the MSIE version in place and what it supports and your Internet settings (ie, whether javascript is disabled or not).
Or the short version: Can't answer that. Try it for yourself and see. ;-)
So far it doesn't seem to be working. I can access a web page from inside a PowerPoint slide show. I can use the navigation on the page and navigate around the site. But when I go to a page that uses HTML5 Canvas, the Canvas objects don't yet appear.

online html5 IDE that works on iPhone

Is there a cloud/web based online HTML5 IDE or playground of some sort that let's me play with JavaScript, JavaScript libraries, HTML and CSS3 using an iPhone (or any modern mobile device for that matter)?
I am looking for one that let's me quickly test stuff while I'm on the go.
It seams that Tinkerbin.com works on iphone (I've just tested it).
This is not ideal but it runs.
JS Bin
Rendera
(One of the most popular alternatives, JsFiddle didn't work for me under iOS.)

JavaScript - shuffling audio

I am creating a webpage that uses JavaScript to shuffle a series of audio file questions and their matching drag-and-drop answers. I have successfully implemented this using the native HTML5 audio tags but also have a fallback section for IE 7/8 since these browsers cannot read the audio tag. This fallback section uses conditional comments around object and param tags as demonstrated at the end of this article here.
It works in that it does shuffle in IE, but breaks in that it displays the ugly Media Player-style controls that I had specifically hidden, as this activity uses "play sound" buttons instead of audio player controls.
If anyone needs to see specific parts of code, just let me know.
Many thanks in advance!
Two thoughts (sorry, I'm on a mac at the moment so testing in IE isn't a great option):
I see the parameters where you're trying to hide the controls, but have you also tried applying css to the object tag or to a container wrapped around it? It might be as simple as giving a wrapper div a style of display: none or visibility: hidden.
This isn't a direct answer to your question, but have you investigated any plugins such as SoundManager 2? It uses HTML5 audio with a Flash fallback; I've used it before and had success. Obviously it requires Flash on older browsers, but if that's not an issue it could be easier than trying to figure out how to hide the controls.
It's a nice little page by the way. Good luck!
To address your second question/comment: using an object/embed tag means that you're relying on the browser/OS deciding on what plugin it will use to play audio. Some Googling turns up issues with IE and quicktime, and one possible solution:
Jan 2009 Microsoft update breaks mp3 sound objects in IE7
IE issues with quicktime
Hope it helps. SoundManager 2 might be worth trying if you keep hitting walls, just be aware that using SM2 will mandate that users with older browsers have Flash installed and unblocked.
I’ve managed to out the second issue with the audio in IE – for the shuffle script to work with the audio in IE, you have to call the shuffle BEFORE the audio code – in my case I moved all the conditional comments below the .shuffle(); stuff and it works no worries!

JavaScript Mimics of the iPad's UI (specifically, UIDatePicker and UIPicker)

Does anyone know a way to mimic the UIDatePicker and the even more general UIPicker iOS controls in HTML & JavaScript?
Does anyone know of a solution like this? I've seen JavaScript mimics of other iPhone/iPad controls, such as the UIPopoverController. I would really like to be able to offer this way of entering dates (compared to solutions like jQuery UI's datepicker). It looks like it would be easy to use both on a mouse scroll-wheel and on the iPad. So, any advice?
One reason all these strange widgets exist is because typing on touchscreens is annoying. You probably wouldn't want to use this sort of widget on desktop for the same reason that very few people like to draw pictures with their mice: the control you get with a mouse isn't really the same as the control you get with a touchscreen.
For that reason, libraries that have implemented functionality like this do it specifically for mobile, and do not ensure compatibility with older browsers such as IE6. If you only need to support good Webkit browsers, and you don't mind using a large framework for this purpose, Sencha Touch's Picker works well (see this page for an example). Sencha's doesn't offer mousewheel support.
I don't know if anyone has implemented one outside of a large framework, but it wouldn't hurt to look around.
--- EDIT ---
A solution listed in a previous StackOverflow question (Date Picker for iPhone Web Application) was chosen as the answer, but it's only for mobile — perhaps only for iPhone. You could look at the code and write one that would work on desktop.
#theazureshadow has a point that this is probably a bad idea for a mouse-based experience.
For anyone looking to do this in a touch-screen browser (smartphone or tablet, iOS or Android), and from my research, this is a great solution : http://demo.mobiscroll.com/. (Found in this answer)
If you only target iOS (iPad and iPhone), this code has a better native iOS feel : http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch
I've been looking for the same thing today and found this pretty good implementation:
http://marinovdh.wordpress.com/2011/09/14/use-the-iphone-uipickerview-control-as-a-selectbox-on-your-website-with-jquery/
There's a zip file with a working demo you can play with. I didn't create this, but I'm going to modify it for a project I'm working on.

How can i make custom buttons to control the <embed>?

Im trying to play some sound(mp3) in my browser. Found <embed> but the default controllers (pause button, volume and timeslider) aint really pretty so what im wondering is how i could control it with some jquery buttons?
i would then hide the embed and call controls with jquery and the embed tags id.
Is this possible, and where could i find a overview of that?
Actually you can do this better with html5 (less load from CPU, but less crossbrowser too)
(google it: custom html5 audio player)
but if you want flash behind the scenes, better go with jPlayer :
http://www.happyworm.com/jquery/jplayer/
I agree with Fusion on that fact that HTML5 is probably the easiest way to go with the best result. However what are you going to do with the non-HTML5 compliant browsers? What about mobile?
My suggestion would be to use the HTML5 solution with compliant browsers, and a jQuery fall back solution for non-HTML5 browsers. That way the users with the most current technology get the best solution, but you don't leave everyone else behind.
jQuery has a wonderful ability to modify DOM so swapping out files in the tag would not be an issue. Check out this sound plugin ( http://plugins.jquery.com/project/sound_plugin ) and see if that fits your need.

Categories