I'm interested in using the Web Audio API. Unfortunately my audio files are are all in an esoteric format that Chrome can't decode. (They're .wavs, but sampled at 96 kHz with 32-bit float encoding.)
Is there any way for me to query my browser (Chrome) to find out exactly which audio formats and encodings it supports?
UPDATE
I've found a list of file formats supported by Chrome here: https://sites.google.com/a/chromium.org/dev/audio-video
You could test this sort of thing by trying to load a variety of sample files using a try...catch construct, and seeing which filetypes load and which don't. See this tutorial for loading files with the Web Audio API in Chrome.
There is! I don't know how reliable this is, but...
// Need to check the canPlayType first or an exception
// will be thrown for those browsers that don't support it
var myAudio = document.createElement('audio');
if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "", "maybe" or "probably"
var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
}
Since we're talking about WAV files here, I would use these:
audio/vnd.wave, audio/wav, audio/wave, audio/x-wav
The best thing to do is to figure out what your file's MIME type is (should be one of the above), and then check for that with something like this:
var canPlayWav = !!myAudio.canPlayType && "" != myAudio.canPlayType('MIME_TYPE_HERE');
if (canPlayWav) { dothis(); } else { dothat(); }
I hope this helps!
Source: http://html5doctor.com/native-audio-in-the-browser/
A non-programmatic way would be those sites:
http://hpr.dogphilosophy.net/test/
http://html5test.com/
Using Lo-Dash:
(function(){
var a = document.createElement('audio'),
types = _(navigator.mimeTypes).pluck('type'),
isAudio = /^audio\//, canPlay = {};
if (a && a.canPlayType) {
types
.push('audio/flac', 'audio/opus', 'audio/webm', 'audio/ogg', 'audio/midi')
.flatten()
.uniq()
.each(function(type){
if (isAudio.test(type)) {
canPlay[type] = !!a.canPlayType(type);
}
});
}
return canPlay;
})();
Related
I need to get the bundle file size as a command output or have it written to a file.
I've considered the webpack-bundle-analyzer, but the command and JSON file output seems to be doing so much that is irrelevant for my use case.
I've also considered the bundlesize package but it mostly does a comparison check and reports the fail or success status as the command output.
If anyone has any ideas on what relevant tools, commands, or flags can help accomplish this. It'll be greatly appreciated.
Cheers
If you are looking for something very specific. You can try creating your own plugin code to extract what you need.
class PluginGetFileSize {
private file: string;
constructor(file: string) {
// receive file to get size
this.file = file;
}
apply(compiler: any) {
compiler.hooks.done.tap(
'Get File Size',
(stats: any) => {
// Get output file
const file = stats.compilation.assetsInfo.get(this.file);
// Verify if file exists
if (!file)
return console.log('File not exists');
// Get file size
const fileSizeInBytes = file.size;
// only used to convert
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
// Get size type
const sizeType = parseInt(Math.floor(Math.log(fileSizeInBytes) / Math.log(1024)).toString());
// Get size of file using size type
const size = Math.round(fileSizeInBytes / Math.pow(1024, sizeType));
// Here you can log, create a file or anything else
console.log(`${this.file} has ${size} ${sizes[sizeType]}`);
}
);
}
}
For this simple example, i only need to pass one file path to use the plugin but if you need, you can pass more files here.
module.exports = {
//...
plugins: [
new PluginGetFileSize('YOUR-OUTPUT-FILE.js'),
],
};
I believe there must be some packages with similar functions like:
size-plugin
webpack dashboard you can learn more about this here
webpack analyse
bundlephobia to visualize your dependencies size in a simple way
webpack visualize
webpack-bundle-analyzer that you brought yourself
lighthouse use to analyze your entire application in different aspects
Also, check out webpack official docs Bundle Analysis section.
Especially if using webpack 5, as some common tools still not supporting it.
bundle-stats is a great tool.
How can I implement a "Did you mean" feature in NodeJS? I searched the internet and found a tutorial that uses a webserver but I will be using this for a Discord bot, so I can't really use tutorials that involve web servers, etc.
For example:
User enters command: restrat
Actual command: restart
Bot Message: Command not found, did you mean "restart"?
Is this possible using NodeJS? If so, may I know how I can implement this?
Any help will be greatly appreciated!
Thanks.
Whether in NodeJS or the browser, some code is needed to find a command that most closely resembles the text entered by the user.
This code uses the Levenshtein distance calculation to return the closest match.
const jsLevenshtein = require("js-levenshtein");
function closestCommand (userText, commands) {
let minDistance = Infinity;
return commands.reduce((closest, cmd) => {
const cmdDistance = jsLevenshtein(userText, cmd);
if (cmdDistance < minDistance) {
minDistance = cmdDistance;
return cmd;
}
return closest;
}, '');
}
const myCommands = ['quit', 'login', 'logout', 'restart', 'refresh'];
const userCommand = 'restrat';
console.log(`closest command is '${closestCommand(userCommand, myCommands)}'`);
// closest command is 'restart'
Working code in RunKit.
It should be straightforward to add this to a NodeJS app.
I've been trying to figure this out by myself, but had no success yet. I don't even know how to start researching for this (though I've tried some Google searchs already, to no avail), so I decided to ask this question here.
Is it possible to return multiple Vinyl files from a Through2 Object Stream?
My use case is this: I receive an HTML file via stream. I want to isolate two different sections of the files (using jQuery) and return them in two separate HTML files. I can do it with a single section (and a single resulting HTML file), but I have absolutely no idea on how I would do generate two different files.
Can anyone give me a hand here?
Thanks in advance.
The basic approach is something like this:
Create as many output files from your input file as you need using the clone() function.
Modify the .contents property of each file depending on what you want to do. Don't forget that this is a Buffer, not a String.
Modify the .path property of each file so your files don't overwrite each other. This is an absolute path so use something like path.parse() and path.join() to make things easier.
Call this.push() from within the through2 transform function for every file you have created.
Here's a quick example that splits a file test.txt into two equally large files test1.txt and test2.txt:
var gulp = require('gulp');
var through = require('through2').obj;
var path = require('path');
gulp.task('default', function () {
return gulp.src('test.txt')
.pipe(through(function(file, enc, cb) {
var c = file.contents.toString();
var f = path.parse(file.path);
var file1 = file.clone();
var file2 = file.clone();
file1.contents = new Buffer(c.substring(0, c.length / 2));
file2.contents = new Buffer(c.substring(c.length / 2));
file1.path = path.join(f.dir, f.name + '1' + f.ext);
file2.path = path.join(f.dir, f.name + '2' + f.ext);
this.push(file1);
this.push(file2);
cb();
}))
.pipe(gulp.dest('out'));
});
I'm trying to split some client-side-only code into several files in a Derby.js project. It has to be client-side only since it's interacting with the TinyMCE editor. So I tried:
app.ready(function(model) {
var tiny = derby.use(require('../../lib/app/TinyMCE'))
//other client-side code
}
and put the following into lib/app/TinyMCE.js:
var derby = require('derby')
module.exports.decorate = 'derby'; //because before I got an 'decorate' is undefined error...
module.exports.TinyMCE = function() {
//code
}
But now I'm getting a object is not a function error.
Am I even on the right track? I also considered putting the code in the public directory, but the cache-expiration of one year makes this rather inconvenient.
Also, is there really no isServer or isClient method to query?
Okay, I don't know whether that's a good way, but I got it working:
module.exports = tiny
tiny.decorate = 'derby'
function tiny() {
//code
}
I'm trying to iterate through all the files contained in the assets folder. To get the working directory I use: AAssetManager_openDir. However simply having this in my code causes a crash on startup - android_main doens't even get a look in. Has anybody had similar problems and/or know how to resolve this?
const char* filename = (const char*)NULL;
const char* dirName = "";
AAssetDir* dir = AAssetManager_openDir(assetManager, dirName);
while((filename = AAssetDir_getNextFileName(dir)) != NULL)
{
//action per file
}
AAssetDir_close(dir);
Well I didn't have any luck getting it to work so I tried a different approach.
I compiled a static library of Minizip and, combined with Zlib, opened the APK file (the path of which found via JNIEnv) and found the filenames nestled within, skipping over entries not contained in the assets folder.
Roundabout way to do it but since AAssetManager_openDir isn't working this seemed like the only option.
Still it would be nice if somebody does find the "correct" solution.
const char* dirName = "";
Is probably what is causing the crash.
Instead try:
while(1)
{
const char* filename = AAssetDir_getNextFileName(dir);
if(!filename)
break;
}