Best way to integrate sound into website [closed] - audio

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking to integrate sound into a website. Basically a chat website where users will hear a sound when a new message arrives. What do you think is the best way to integrate sound?
Javascript to play the sound
Javascript to call a flash swf which plays the sound
Any other method I cant think of?
Thank you for your time.

A small swf with the sound controlled by javascript would the the way to go in terms of being cross platform and cross browser.

I would go with option #2. But, with a word of caution when integrating any sound into a web site, people often find it annoying, when a sound comes out of the blue.

As Conrad said, use javascript and swf. You can also take a look at what other people use. One example that I like is the Campfire chat. It works in all browsers and OS:es that I've tried it with.

The most elegant solution would be to use the upcoming HTML5 <audio> tag. You can script this from JavaScript. Support for this is poor, however.
As as said by others, the alternative would be a Flash solution.
I would recommend using the <audio> tag where possible and Flash as fallback content.

I personally don't like websites that need JavaScript activated to accomplish something in Flash (eg. youtube), because generally speaking I have deactivated JavaScript. Therefore I would suggest to only use Flash. However this is a personal thing. Most users probably don't mind.

Personally I don't like background music or sounds on websites. Reminds me of the bad old days were every site had a background MIDI file on it.
At least have the option to switch it off :)

3 Use Flash. It's widely supported and it works better than Java applets.
Please make a clearly visible mute button too! :)

This is a very nice API that uses flash and javascript to make embedding sound in your webpages easy as something very easy: http://www.schillmania.com/projects/soundmanager2/

Setting aside the ethics of whether to make a sound play in a web page automatically...
I've got this working with XHTML 1.0 Strict in FF 3.x+, Opera 9.x+, IE6+, but not in Chrome (3.0.195.38) or Safari (4.0.4). So, I can't figure out how to get Webkit to accept it. Note this likely will not pass XHTML validation. And also note that my doctype stuff starts off like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Anyway, although the following code doesn't work yet in Webkit browsers, it works in other browsers:
<bgsound src="http://example.com/sound.wav" loop="0" />
<audio src="http://example.com/sound.wav" autoplay loop="false" />
If anyone know how to get this working in Webkit browsers, I'd like to know how.

Related

How do I know if my browser supports SVG 2.0?

How do I know if my browser supports SVG 2.0?
(Apart from trying a feature that is supposed to work in SVG2 and realizing it's not working or that it works ...?)
From what I understand SVG 2.0 is still a work in progress with no full browser implementation.
For the more elusive features of SVG that may not be implemented by all browser you can check CanIUse to see if the feature is supported.
Asking if a browser supports SVG 2 is like asking if a browser supports HTML5. It seems like a totally reasonable question, but it doesn't work like that.
The best we can do is test if a browser supports a feature, rather than a version of spec.

Standard development platform for the web browsers

Until recently I hadn't done much work for the web. I found the various inconsistencies about the way different browsers handle CSS and JavaScript quite annoying. I was wondering why hasn't anyone created something like the JVM for the browsers? I mean like a layer that runs on top of the browser which you can write code for and is consistent for all browsers? I know nothing about browsers so this question might be stupid.
Adobe Flash or Microsoft Silverlight

Should i be using HTML5 and CSS3?

I'm someone who wants to be up on the latest web technologies but also appreciate that alot people still use IE6/7/8. Is it a waste of code/time if half of it wont be displayed on most browsers? Is it just a case of using different style sheets, or just use one style sheet and if a browser doesnt support text-shadow, then screw it, they can see it without the nice effects. What are peoples thoughts?
It depends on your userbase. I am an intranet developer and my company still uses IE6(!!!) so we have no choice but to support IE6. I also develop some public facing websites and we use Analytical tools to see the which Browser is being used more and ignore ones which are less used. in this case IE6 was the least used Browser.
I won't go for HTML5 and CSS3 till Internet Explorer 9 or Firefox 4 (absolute release, not alpha or beta) is released, because these two browsers make up the most of web traffic (afaik, correct me if I'm wrong) and using html5 or css3 will be a big loss.
And yeah, it depends on your userbase too.
I'm developing a small-business oriented online app and decided to support only IE8, FF and Chrome. I also went for one stylesheet that degrades nicely (text-shadow, rounded corners). IE8 users will see square corners but it doesn't make the site unusable in any way.
I just think that the cost of making everything look perfect in all browsers (and maintaining it!) is much higher than the benefits.
The above also applies to HTML5 IMHO - unless you know that vast majority of your users will have an HTML5-compatible browser there's no need to invest in it right now. Unless the whole point of your site is to use one of the newest features.
Just tell yourself what problem of your users you are actually solving and solve that one.

Is it sensible to dynamically generate SVG images on websites yet?

I'm just learning about SVG, and it seems great but I'm not sure about browser support - have people successfully got around this, or is it still too early?
Raphael is a cross-browser vector graphics library which might be worth a look.
You can use John Resig's processing.js library to get cross-browser compatibility.
There is also Walter Zorn's (lot of DIVs) technique, that doesn't use SVG.
There is a new way to bypass internet explorer's lack of svg-capabilities:
The google project svgweb: Scalable Vector Graphics for Web Browsers using Flash.
It's a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari.
I thought it was worth updating this dialog because things are becoming more "do able" in SVG cross-browser. As someone who has implemented some (fairly significant) systems for organisation I have been "dabbling" into the world of "cross-browser" SVG.
I see the words "still too early" on a dialog started 11 months ago and I'm adding to it.
Please go to my site that shows some of the capabilities of Raphael. You can easily link to the main Raphael site there after your pitstop.
My website was implemented with Raphael 0.8.6 but the creater of "Rap" just brought version 1.0 from beta and that (additionally) fully supports SVG "paths"
If you want to visit the world of CROSS-BROWSER interactive/SVG in it's current status please visit these constamtly updated websites via:
http://www.irunmywebsite.com/raphael/raphaelsource.html
I'd say your best bet is to create the image in whatever format you're most comfortable with, then convert it to SVG with something like ImageMagick. You could write PostScript by hand or with a library, or directly create the image from simple text/shape primitives using the ImageMagick API. There's pretty good documentation, and you can call ImageMagick as a COM object (assuming your language has good COM support).
Adobe also makes an SVG viewer plugin that you can link to on your site for people to get full functionality of your site. Unfortunately, they are discontinuing support for the plugin, but by that time, it is expected that more browser support will be forthcoming (hopefully). Several years ago I worked for a company that wrote an entire web app using SVG, and we had great success with this plugin.

Tips / Resources for building a Google Chrome plugin [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
After test driving Google Chrome for 30 minutes or so, I like it, even if it seems bare-bones at the moment. The obvious way to add a few things I can't live without would be through plugins. Does anyone have any links to resources on how to get started building a plugin/addon for Chrome? Thanks.
Matt Cutts (the Google
SEO guru) has a Q&A about chrome, and
writes about it:
Q: But I can’t install extension X! Google Chrome is dead to me if I can’t use extension X!
A: Then you’ll have to use another browser for a while. Google Chrome currently doesn’t support browser extensions (it does support plug-ins, such as Flash). I’m sure that extensions/add-ons are something that the Chrome team would like to do down the road, but the Chrome team will be a bit busy for a while, what with the feedback from the launch plus working on Mac and Linux support. I’d suggest that you give Google Chrome a try for a few days to see if enjoy browsing even without extension X. A lot of really cool extension-like behaviors such as resize-able textareas and drag-and-drop file upload are already built into Google Chrome.
Q: But I can’t install extension X! Google Chrome is dead to me if I can’t use extension X!
A: No worries! Now google chrome has extensions too. Look here.
If anyone's interested in chrome extension development here is a link to the latest extension developers documentation page for Google chrome.
NOTE: Plugins (NPAPI) and extensions(JS Based) are not the same
From the doc...
Extensions are small software programs
that can modify and enhance the
functionality of Google Chrome.
You write them using web technologies
like HTML, JavaScript, and CSS. So if
you know how to write web pages, you
already know most of what you need to
know to write extensions.
Chromium supports NPAPI plugins which is harder to program compared to Firefox extensions. However NPAPI has better performance and is more versatile.
Checkout this minimalistic example of an NPAPI plugin.
Chrome does support the netscape plugin api, but that is for displaying certain kinds of content.
You seem to be after a extention api, really firefox is the only major browser to encourage and support third party extentions to browsing capability (that aren't simply new toolbars)
Nothing in the developer documentation points to a browser enhancing api - google seem to want to keep a tight reign on the look and feel of the application.
You might find a more conclusive answer on the development site:
dev.chromium.org, and some of the developers might be on irc on #chromium on freenode.
Chrome now supports extensions and themes. Here is the documentation for developing extensions, and this is a page which describes theme creation.
The accepted answer is out of date. A couple of useful URLs:
For developers: http://developer.chrome.com/extensions/index.html
For end users: https://chrome.google.com/webstore/category/home?hl=en-US
There's a difference between a 'plugin' and an 'extension'. Chrome supports NPAPI plugins:
http://developer.chrome.com/extensions/npapi.html
Chrome may also support a new Pepper Plugin API (ppapi):
http://code.google.com/p/ppapi/

Resources