Glitch audio using web audio api - javascript

Similar to the Pure Data example here (https://www.youtube.com/watch?v=FLK854QyjE4) I'm trying to conceptualise how a file, such as a text file, might be read in Javascript and played back as glitch audio with the web audio api.
What I've tried so far:
A text string to base64 string appended with data:audio/mp3;base64, - results in "No video with supported format and MIME type found".
Text to binary with audio headers added - just does nothing.
How would I go about this?

Related

Not fully downloaded blob: videos

Hi developers i have some problems with blob videos for long time.So I think i finally got hierarchy of blob video that something like reads part of video from server and sends to client.But today i encounter some other problem.Firstly I searched from where comes this blob data to player and some articles gave me useful information for to refer to the links for blob that in inspect section of web page Network section on Chrome.
In this way i saw that the blob video downloads every few seconds with different urls but with little modification.The site was : https://www2.1movies.is/movie/xxxxxxxxxxxxx.html
Blob request refers to urls in a short time with only change of number like that:
s7--p.ex/ample--{seq-1}-xxxx.xxxxxxx
in this exapmle only seq 1 changes frequently and number increasing.
So i used python to download this video by parts in normal mode (without asyncio , or with another sophisticated ways).I did't know how many parts consists video and i checked manually untill it will give 404 error.I did't saved code i used cmd ,therefore i will give code with example.
import urllib as ur
def downloader(x):
"Imagine we will call downloader with given seed url
for example site.com/seq-{}-signature=xxxxxx
in there program will change number with format like that
site.com/seq-1-signature=xxxxxx
site.com/seq-2-signature=xxxxxx and so on.."
for i in range(1,2000):
try:
"video will created with given namber like -> : 1.ts , 2.ts"
ff=open("{}.ts".format(i),'wb')
"and part of video will be read with url and write to file"
ff.write(x.urlopen(x.format(i)).read())
ff.close()
except Exception:
continue
>>>downloader('examp.ple/seq-{}-ddadadaad')
so program worked , but when i attempt to combine all video in one then i saw all parts did't loaded fully , fr example in network section 215th part show 300kb but downloaded file is 298kb.Therefore video playing like interrupted..
So maybe there are have other ways to download this kind of videos but if site works with this way , why didn't I succeed?

Is it possible to cut part of video and upload it on server only with html5 & js

I use Filereader to read local video file (mp4), so I can display it in video tag.
I need to cut part of mp4 file (i.e. from 5 to 10 seconds) and upload it on server.
My current solution: I upload whole video file on server with "from" and "to" parameters, cut it with ffmpeg on server, upload to s3 and return the url video.
Maybe is it possible only with JS/HTML? I found Blob.slice method but i didn't know how to use it to cut video parts.
Thanks!
An mp4 video file is made up of 'atoms' which are like blocks of information or data within a file.
They contain header and metadata about the tracks in the movie (Audio, video, subtitles etc) and also the media data itself.
The concepts are straightforward but an mp4 file is quite involved when you look at one - there is a good example here from the apple developers site (https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):
If you take a 'slice' of the mp4 file by simply taking bytes from some point in the file to some other point, you can see that you will be missing header information etc depending where you start from, and will also most likely start in the middle of an 'atom'.
Tools like ffmpeg do the hard work to extract and restructure the file when you want to cut part of the video.
There are projects which run ffmpeg in the bowser, but I'm not sure how practical or adopted they are - the one seems pretty popular anyway:
https://github.com/bgrins/videoconverter.js

How to display Motion JPEG binary data stream with Angular/Ionic/JS?

I'm coding an app for a device, such device will receive a POST request, and send back a multipart/x-mixed-replace binary data stream. I must display such stream on one section of my app's home page.
I searched through, there's very limited resource on such case. So far, I found that if the Motion JPEG is sent from a specific URL, then maybe it's possible to use iframe/img tag to display it. However, my case is different, it seems I have to parse such binary stream then create an Observable to alter the img element on an image html tag once I get a frame from the Motion JPEG binary stream.
Is there a simpler way to do that ? I found https://gist.github.com/legege/5301477, can I use this ?
I actually solved this by myself, and learned a lot in the research.
The core idea is to use a xmlHTTP request to fetch the motionJPEG data, It's about how to transfer binary data.
Then use a web worker to process the binary data.
And finally use canvas to draw the image on ionic page.
Due to the front end JS delay on image loading, such motionJPEG preview would not be so smooth currently in my implementation. But this is possible now with JS.
Please check github https://github.com/makoto-unity/ThetaWifiStreaming

Replacing audio track of the video

I have a video file "MyVideo.mp4" (*.mp4 is not required. It can be in any others formats) and I have an audio file "MyAudio.mp3".
Does anyone have any ideas how to replace an audio track from the video on the audio file "MyAudio.mp3"?
Demultiplexing + remultiplexing ("splitting" + "recombining") is something you would like to do on server side using a software like FFMpeg or similar.
Doing this is JavaScript will be non-trivial as you would have to parse and save the file formats manually (you must be able to parse all formats you'd support).

Read jpeg xmp metadata with javascript

Is there any way to read jpg metadata with javascript? My main interest is the xmp rating value (rating of 5 stars showing in Windows Explorer). Also the time when the picture was taken is of interest.
I know I can get this data using server side code, but I'd like to avoid the extra roundtrip to get this info.
My use case is a simple gallery website, where I'd like to show the rating given in Windows Explorer, and possibly things like when the picture was taken etc.
XMP Metadata in a JPEG is actually just plain text embedded into the JPEG.
If you open a JPEG as a text file and ctr-f "xmp" you will be brought to the XMP metadata. It will be in xml format.
In javascript, you can just use the file reader api to read the text and then parse the xmp string to retrieve the info you are looking for.

Categories

Resources