Im trying to develop an javascript based audio editor. It should be possible to record, play and edit an audio file with. Its especially important to visualize the recording audio (realtime) and the selected/uploaded audio file (both of them).
I red alot about the Web-Audio-API and saw a few examples as well, but there are some problems - it only works in chrome/safari so far, it should be run on firefox as well, but it doesnt. So what Im looking for is an crossbrowser API or javascript/jquery libary which provides the called features.
Here are some examples to show u what I mean:
http://plucked.de/ (great tool, but there are many bugs as well)
http://www.stud.fit.vutbr.cz/~xmyler00/audiee/ (as u can see web audio API doesnt work on firefox)
The Web-Audio-API is a fairly new standard and is steadily being adopted by the major browsers with varying levels of support. Currently Chrome and Safari have the best support and Firefox support is in it's draft stage. For the sort of application, with cross browser support, that you're wanting you will need to go to third party plugins/extensions/addons for the support you're after.
Welcome to the bleeding edge. :)
Related
I tried to take a screenshot of a movie on the Disney+ web app when I realised that the video turns black as soon as I try to take a new screenshot with Snipping Tool. When I tried to do the same thing with OBS and Discord streams, I saw the same effect.
Interestingly, this only works for Chrome on my machine (I also tried Firefox and Edge and they just let me record my screen).
When I saw this, I became really curious on how they achieved this.
Does anyone have any idea how I can recreate this for my own web projects?
I became really curious on how they achieved this.
They use Widevine.
Widevine homepage.
https://ottverse.com/widevine-drm-how-does-it-work/
https://en.wikipedia.org/wiki/Widevine
News reports:
https://www.cordcuttersnews.com/sadly-disney-wont-work-on-chromebooks-linux-some-android-devices-because-of-drm/
https://www.tomsguide.com/news/disney-plus-will-work-on-chromebooks
https://www.androidpolice.com/2019/10/22/disney-will-only-work-on-devices-that-support-the-strictest-widevine-l3-drm/
It's also used by Netflix, Hulu and others.
Widevine is Google's DRM system that's baked-in to Chrome.
All other major browsers have adopted it as well, because no-one will use a browser that can't access Netflix.
Mozilla's and Microsoft's support is less user-hostile and as you noticed.
It's just a standard HTML5 <video> element - when the browser downloads the video stream it will see that it's encrypted with Widevine and that engages the Widevine client-side code which does all the DRM biz.
Though there are HTML and DOM features that facilitate DRM, I'm unsure of the extent that any JavaScript is required to use it - as theoretically everything the browser needs to know to load the DRM system should be embedded in the raw media stream.
On Windows, I understand (though unconfirmed) that Widevine makes use of SetWindowDisplayAffinity to block screenshots.
Nothing stops you from doing this in your own native code (e.g. if you had an Electron fork), but please don't because it's a real dick-move to your users, in addition to not working at all if the user has the DWM disabled (e.g. they're running Windows 7 with Aero disabled).
Has anyone any idea how I can recreate this for my own web projects?
You'll need to license Widevine yourself. This is a complicated process intended only for large media production companies and content rightsholders, not individuals or small businesses.
Anyway, even if you could, please don't. Why would you want to make to harder for users to share and appreciate your media? Just stick it up on YouTube instead.
I see HTML5 has nice set of JS classes which helps us integrate voice capability to the website (speak to type and speak to command) very easily. However it looks like it mainly for Chrome and managed by Google.
I can't find how to get it working with similar technology for Internet Explorer.
Do anybody have any reference or example link which I can refer?
According to https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility they do not support webkitSpeechRecognition.
That is for built in browser support. Now if you would like to pay for this support you could use IBM Bluemix or Google Speech api.
https://www.ibm.com/watson/developercloud/speech-to-text.html OR
https://cloud.google.com/
The speech recognition APIs that you're referring to are indeed new and not fully supported.
They are also not official HTML5 APIs -- they are currently marked as unofficial. That doesn't mean they won't eventually become official APIs, but for now they are just something that Google thought would be a good idea.
You can find info about them on the CanIUse website. As you'll see on this page, they are supported in Chrome and Opera, and also in Firefox, although only as an experimental feature, meaning that the user would have to enable the feature manually in the browser.
More significantly in relation to your question, the page also states that they are "In development" for Microsoft Edge. This means that there is a good chance that they'll be available in Edge in a future release, within a reasonable space of time. They are not available now, and will never be available in IE, as Microsoft are only developing new features for Edge now.
Therefore, if you need to support IE, you will need something else. There is nothing standard or even well-known that I can recommend though.
You can't have this feature in Internet explorer right now. May be in the future they would implement this functionality.Let me give you an example- the link below is by microsoft teams describing the text-to-speech functionality by a demo application. Try running it on Internet Explorer, it won't work. So whoever asks you to achieve this, show this example.
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/speechsynthesis/
They have separated out the code for browsers which doesn't support the speechsynthesis object. Do have a look in the developer tools for better understanding.
We need to capture voice in a web portal. Our contractor developed the whole web portal without using Java Applications, only client-side code, and claims there is no way to capture voice using JavaScript today.
I'm not a Java guy, so I don't have the skills to discuss this, but I'll appreciate any help our folks here in SO can give: if you guys say it can not be done with today technology, so be it...
PS: the solution MUST attend IE, Chrome, Firefox and Safari, for end users, so Canary is out of question for now.
Currently there's no way reliable way to record audio using only HTML5 and JavaScript across browsers.
The only cross browser solution for non Flash recording on desktop browsers in the foreseeable future is the Media Recorder API. It's a recent standard proposal for a JS API who's purpose is to make audio and video recording in the browser very simple. Today it works only in Firefox 27 and only for audio. This article covers the standard in more detail.
If audio recording is important for you today I recommend you check out proven flash solutions like FLVAR or Audior. They work on all browsers, they are reliable and supported. Flash just works and major sites like YouTube and Netflix continue to use it.
The javascript's getUserMedia (getUserMedia on MDN) is a simple way to do this. I suggest you addyosmani's polyfill that has a flash fallback in case the browser doesn't yet support it.
To preface this, all of my experience has been with developing Ruby on Rails web apps serving, essentially, text data - I don't have any experience yet with rich media.
I'm looking into developing a music notation app (for practice and because I'm dissatisfied with many of the current options), and am trying to determine whether or not to build a native app or a web app. Since all of my programming experience lies in web development, I would prefer to make this a web app if I can, because if I chose to go native I would need to find a decent cross-platform solution in addition to the usual pitfalls of developing natively.
I suspect that even with HTML5 I wouldn't have access to enough processing power to make a browser-based audio engine feasible. It would need to have the ability to play and sequence not a single large .wav file of a song, but many short .wav files concurrently and in sequence. There would be no need for recording - only playback.
But since I've never done this before I really don't know if this is possible. So, I wanted to pose this to more experienced HTML5 media developers:
For modern browsers (I'm not too concerned with support for older browsers), would such an audio engine be feasible? (As in, is the current landscape of JS libraries and the HTML5 audio API sufficient for building something like this?) Or would something like this be far too CPU / memory hungry in a browser?
Thanks!
In my experience Chrome and Firefox for desktop both work great with multiple, sequenced, .wav files embedded in audio tags. You can trigger them with JavaScript and it all seems to work great.
Unfortunately, Mobile Safari seemed to be unhappy with more than one audio tag playing at once, and Chrome for Android had similar limitations. This was a year ago, so things might be different now.
Since we were targeting iPads, we wound up using Phonegap to mix in some native sound libraries into our HTML & JavaScript app. One gotcha that tripped us up: if you want looping audio samples, stick to .wav files; .mp3 files have some silence at the start and end that's really tricky to get rid of.
I've been investigating Web Audio Api to build synths, and it's still very primitive and difficult to use. The infrastructure seems to have had a boost when Web Audio was introduced, but not much development since. Mobile audio on the web is rarely mentioned, too clunky, or unsupported.
At the same time, JS has become significantly faster with the V8 engine, JS loading can happen as needed, asynchronously, and non-blocking, which may solve many of the CPU/memory concerns you have. Look into NodeJS and various module loaders such as webpack, ES6, for more info.
I think there will be attention to web-based music apps because the web can support multiple users. That could be a good reason to keep pushing through these murky waters.. especially if you're talking concurrent connections.
See Molgav tracker. It works on desktop and mobile, it uses hundred of sampled instruments, it has UI adapted for small mobile touchscreens. See how examples sounds.
I want to make a basic, 2D fighting game (not fast paced nor does it have many cool effects.)
I could make it with jQuery, but I think that it would run slowly (to my knowledge).
Can anyone give me an alternative to flash for the development of this game?
You might want to check out Processing.js, if you prefer not using browser plug-ins.
Processing.js uses Javascript to draw shapes and manipulate images on the Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.
If you like get this game running on the most computers out there I would go for these technologies:
Flash (fast, and availabable and installed nearly everywhere, frameworks for gameprogramming are out there)
JavaScript (no browser-plugin required, but performance will realy suck, especially at older computers or browsers)
Silverlight (could be suitable, but still a just a very few people have it installed and I do not know if there any good working versions for Mac and Linux)
JavaApplets (lesser installations then Flash, could be fine, altough it seems quite unsexy to use JavaApplets in these days.)
I already saw most options listed, but I thought I'd chime in with another great option that is now free (unless your game makes more than $100K/year and then you must pay a one time $1,500 fee: Unity.
This game generation tool allows you to use a visual developement environment with either javascript, boo or C# to develop games that can be played in a browser, on windows or on a mac. Though it is best known for 3D game development, it certainly supports 2D development.
Here is an example of a browser based 2D game made using Unity.
Bubblemark provides a "performance test" of sorts of all of your available options. I'm biased, but I'd still say Flash.
Jquery is not designed whatsoever to do what you want, flash however is the obvious and ubiquitous solution as far as you're talking about a browser game. If you want something localized, look for graphics packages for whatever language you're comfortable with: pygame[python], gosu[ruby]
Saw this yesterday on reddit: http://www.renderengine.com/demos.php JavaScript game engine
You mentioned jQuery for games, and I recently came across the gameQuery library. Coupled with jQuery 1.4 (with recent performance improvements) and the fact that all major browser vendors are falling over themselves lately to improve JavaScript performance, building a game without Flash or Silverlight is now feasible and productive.
I have also investigated the Raphaël library (raphaeljs.com), a low-level graphics alternative to Processing.js and canvas mentioned earlier. SVG elements are indeed compatible with jQuery. Here's an example of a hex grid on Raphaël with jQuery for click events.
You should check out Effect Games.
It is a free to use, online hosted Javascript Game Engine that runs incredibly smooth and supports all major browsers. Don't believe me? Play this demo, or this one.
Those that say you must use Flash and Javascript is too slow, obviously haven't been paying attention, especially to the newer browser such as Chrome that utilise compiled javascript. Why use Flash, when you can have a cross platform, cross browser game developed using native browser functionality.
You should also check out Chrome Experiments to see just how much current Javascript (and sometimes HTML5) capabliities have improved.
Effect Games provides free, online
tools for building, sharing and
playing your own browser based games.
Your games may include sound effects,
music, and multiple layers of
parallax-scrolling tiles and sprites.
Users can play your games right in
their browsers, without needing any
new plugins or extensions. Publish
your games on your website or blog,
share on social networking sites, and
submit them to our featured games
section!
Build your games using JavaScript and
our custom browser game engine, level
editor, and suite of developer tools.
The Effect Engine supports Mac OS X,
Windows, Linux and all modern browsers
including IE, Firefox, Chrome, Opera
and Safari.
Microsoft Silverlight is similar to flash, but not flash.
Flash can be done in the traditional sense or in Flex if you want it more of a traditional programming experience. Silverlight is a great flash substitute if you would rather do your programming in .net. Javascript games are possible but difficult to do I think you would save a lot of your time if you did it in flash instead.
I believe a great option would be to use SilverSprite. It allows for creating XNA games for Microsoft SilverLight using the same knowledge base you find for Windows and XBOX 360 (only working for 2D games so far)
Panda3D is a full-blown game engine that can make browser-based executables. I have not tested this functionality myself, but it seems to work pretty well.
http://www.panda3d.org
check it out, it rocks.
http://gamejs.org
or any of https://github.com/bebraw/jswiki/wiki/Game-Engines