How do I store assets for javascript on the web? - javascript

Recently I have been trying to create a chat project which makes a ringing noise once you receive a message. My problem is that I cannot find a ringing noise that will be available for the project anywhere. Google drive does not work, the javascript can't process it. For some reason if I link sound from wikipedia it does work. Is there a way to upload a ringing sound which will be available to link to through javascript?
Thanks!
P.S. I'm sorry about how long this question is, congratulations if you read it & managed to understand what I'm saying :)

It creates a bit of overhead but you can use something like this to have an easy access to your audio:
http://www.createjs.com/soundjs
In a theoretical sense you would have your assets (be it soundfiles or images or what ever) loaded to the webserver you serve your page from. Normaly you will have an assets folder on there. You can then access these files by using the path to that folder on your server in your code.
HTML5 should provide functions for sound playback and such as well. Might as well start there

Related

Audio Editor in a Django App?

I'm in a little over my head with a project for a client, they want to build an audio editor that will allow the user to trim their uploaded audio files and save them. I've built the file uploader, and the detail view for the individual audio files, my question is how would this best be implemented? I've been looking at
Peaks.js
and I want to make sure thats the right way to go before diving in. Never used npm in a django project before, is it like using any other js library?
I've also been told about sox, which is great for manipulating the sound files, but what about displaying the sound to the user/editing in the browser?
Any help or general direction-pointing would be greatly appreciated and could save me a bunch of time potentially.

Create folder & file plugin Sketch

I'm trying to create a plugin for Sketch that creates a folder and a file inside it on a specific location.
Since the sketch plugins are written with JavaScript I've been searching how to create a folder and/or a file with JavaScript, and then think about the path, but i'm stuck, i couldn't find the answer so i decided to open a thread myself.
The question is: How can i create a folder/file with JavaScript? and how i can choose where i put it?
Any feedback is welcome I'm new to posting here and a noob with programming so feel free to redirect me to documentation and/or tutorials that may be useful for my issue.
The simple answer is you can't. Imagine if any old website could create files and folders on your disk whenever it liked. The security implications would be horrendous.
This can be done with the user's permission.
AppSandbox provides this functionality for you:
https://github.com/bomberstudios/sketch-sandbox/blob/master/sandbox.js
The user is prompted to grant permission to do this the first time they run your plug-in. Every time after, it simply writes the file without interruption.

Is it possible to record sound playing in browser or speaker in javascript or by any scripting language?

I have used html audio tags for playing multiple mp3 file in browser. I want to know if it is possible to record these mp3's into a single mp3 file in javascript(specifically)?. Or even if any module which can help me record these playing mp3's.
Generally, no.
It is possible to work with audio in JS but probably not in the way you want. See this question for more info.
I don't know what exactly you're trying to do but it seems like you would need to do it server-side, and even that would take effort to achieve (Since you would need to find a library that could merge multiple MP3s into a single file and then serve that as a download to the user. This would also require you to know how to install such software and make it available to your server-side code).

Saving a file from a chrome packaged app

I have a Chrome packaged app that has taken me a while to get my head around but I finally have it working. However I have now come across another problem.
Is it possible to save a variable from my app into a text file that's placed in my app/file directory?
I have looked over the chrome.fileSystem api but I don't really understand it.
I could be completely wrong and maybe you can't save files to the file directory?
Any examples or tutorials on this would be great!
Thanks!
I would suggest storing the file's contents in chrome.storage and then dynamically loading and saving the contents of your css file from there instead of using the filesystem. To me, this would be much easier to accomplish.
chrome.storage sounds like a good fit all right (though not too sure about your specific needs in accessing the css outside the app). It's main use case is for saving state and storing configuration settings/variables.
We've a code lab that walks through all kinds of chrome apps stuff, including chrome.storage here: http://developer.chrome.com/trunk/apps/app_codelab5_data.html
There's also the new syncFileSystem API, which really doesn't seem to fit your needs. This is document/file level synchronization, like getting access to user's files on hard drive, saving them in app, and syncing them.
But sure, if you are curious, here's the docs on working with Chrome File System and sync File System: http://developer.chrome.com/trunk/apps/app_storage.html
We're also working on a doc that explains the key concepts around storing data in the cloud (specifically for packaged apps). Hoping to have an early cut in trunk over the next week or so.
Keep us posted on how you get on!

Send Information inside a .png image then extract it through javascript?

After searching around in Google for a while I have not had any luck or guidance in my question.
I want to be able to load up a website using javascript, ajax, in order to reduce the amount of requests needed by the server from the client. My goal is to embed/encode data within an image such that only the client needs to request this image through ajax call, and then be decoded to find the js, css, and other files needed. Then the js, css and other files will be inserted into the DOM.
If I can get the above to work then I could have a lot of flexibility on how my webapp is loaded and be able to notify the user how close the webapp is to being ready for viewing.
Currently my problem is that I cannot find how I would encode the data within an image.
Even if this is not the way to be going about serving up a webapp my curiosity is getting the best of me and I would just really like to do this.
Any guidance or pointers would be greatly appreciated!
Also: I am learning Python so if you know of a python module that I could play with that would be cool. Currently i'm playing with the pypng module to see if this could be done.
To be frank. Don't do that.
The brightest minds on earth use other methods to keep the number of requests and response time down. The most common technique for minimizing the number of requests is called Bundling. In short, you just copy'n paste all js files after each other into one big js file and all the css files into one big css file. This way you need to download two files, one js and one css. Better than that is usually not worth the trouble.
To further keep response times down you usually minify your js and css files. This is a process where all white space, comments, etc are removed and internal variable names are made as short as possible.
Finally you can serve both js and css files as gziped files to further reduce the file size to transfer.
There are many tools out there that does both bundling and minification for you. Google and pick one that suits your other tooling support.

Categories