So I use FFmpeg to manipulate my audio files but there is no way of knowing what it will sound like before I actually upload the file(HTML form).
Is there a way to edit the audio with a real-time player or something?
I cannot find anything about this, thats why I am asking this question.
$cmd = 'ffmpeg.exe -i path/to/audio.mp3 -filter:a asetrate=54000,atempo=' . $speed . ' output.mp3 2>&1';
exec($cmd, $output);
So can I replace atempo=$speed with real-time input? And listen to it on my website before I actually process it.
Not sure if it is even possible with FFmpeg.
A real time editor does not seem possible with FFmpeg. You can stream real time, but you cannot output actual edits into your website.
Related
I was playing around with urls the other day and i was wondering if there is a way to for example substitute the domain name for a video link on page load
in the source code, while having the original link still interpreted by the browser to play the video correctly.
So for example, if i host an .mp4 on my server with following link:
<source src="https://goofy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
and i would like it to appear in the source code as:
<source src="https://snoopy.com/dogs.mp4" type="video/mp4" label="Low" res="360">
but still having the goofy one played in the player, it it possible ?
(maybe with javascript ?)
What i am trying to achieve here doesn't need to be that advanced, when i meant "scrape" i was just thinking about people opening the inspector manually and simply grabbing the link, in my example:
https://goofy.com/dogs.mp4
So i was rather thinking of some simple javascript letter substitution scheme on pageload that would display some random letters instead of "goofy". Maybe something like this:
var chars = {'a':'b','c':'z','i':'e'};
var enc;
var str = "goofy.com";
window.onload = function() {
enc = str.replace(/[abc]/g, m => chars[m]);
alert(enc);
};
but i think it won't work, as the player will end up playing the url with the wrong domain name. An i'm not that good at javascript, so i'm not sure of what i'm doing either... Feel free to correct me or maybe offer some solution ? thanks.
Per your comment reply, you want to obfuscate the source urls for a video file.
No, modifying the urls in the <source/> DOM elements won't do anything for you. A bot is getting the raw html from your site, so if the original source urls are embedded there you're not going to be able to hide anything.
Moving up the stack a bit, look at how Youtube handles structuring their urls. At its core, they have a js library that handles building out the video urls and video player dynamically at run time. While its highly obfuscated, its not a huge amount of work to discover what the actual video urls are and download them if you want. If someone really wants to get your videos, its not much work to either investigate the page with dev tools in the browser.
And going low-level, its arbitrary to run a packet sniffer like Charles proxy with a man in the middle local SSL proxy service (built in) to look at the requests being sent back and forth and to easily track down the source url that are delivering the video.
You could go back 10 years and try using Flash or some other embedded 3rd party plugin to "encrypt" the video stream but that's stupid and self defeating. If I really want your videos, I'll just play them full screen and record them on my computer.
Hopefully that more thoroughly answers your question.
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
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).
I'm using MIDI.js to play a MIDI file. I'd like to adjust the tempo on the fly, based on user input. Is there a way to eg. inject setTempo events to the MIDI stream?
Also, I'd probably like to ignore any setTempo events in the MIDI file itself.
Do I need to fork the player code to achieve these?
You need to set something like MIDI.Player.BPM = 60; somewhere before loading midi file. Found in the source.
So, this probably means that you can not change BPM during file playback.
So, I'm trying to think of the best way to solve a problem I have.
The problem is that I produce many websites for my job and as CSS3 and HTML5 introduce themselves powerful I want to eliminate almost all images from my websites. For button icons and various other things I have a sprite image with all the icons on that I just shift around depending what icon I need. What I need to be able to do is recolour this image dynamically on the web server so that I don't have to open up Photoshop and recolour the icons manually.
I have done some research and the only thing that I've come across that has a chance of working the way I want it to is a Photoshop JavaScript. My question is, once I've written my script and it recolours my icon image, can it be done on a server so, when a user clicks a button for example, the image is recoloured and saved to the server?
Would this require installing Photoshop being installed on the server? Is this even possible?
Photoshop is just available for Mac or Windows as you will know.
As far as i know you can't install Photoshop on Windows Server. (I tried it with CS4 by myself - maybe it works with CS6 knowadays). But you could install PS on a Win 7 machine behind a firewall.
If you use a Windows machine you can use COM for automation. I tried it and it worked well.
I have done a similiar thing you are thinking of with two Macs and PS Javascript (Imagemagick, PIL etc. weren't working for me, because the job was too complicated) on a medium traffic webpage. So i don't agree with Michaels answer.
First thing: think about caching the images and use the low-traffic-time to compute images which could be needed in future. This really made things easier for me.
Second Thing: Experiment with image size, dpi etc. The smaller the images - the faster the process.
My Workflow was:
Webserver is writing to a database ("Hey i need a new image with name "path/bla.jpg").
A Ajax call is checking if the image is present. If not - show "processing your request placeholder"
A script running in a infinite loop on the mac behind a firewall is constanly checking if a new image is needed.
If it finds one it is updating the database ("Mac One will compute this job"). This prevents that every Mac will go for the new image.
The script is calling Photoshop. Photoshop is computing the image.
The script uploads the image (i used rsync) to the webserver.
ajax-call sees the new image and presents it to the user.
Script on the Mac updates database "image successfully created".
You will need some error handling logic etc.
Uhm this problem has been bothering me for years too.. all i always wished was to have a Photoshop Server which i could talk trough an API and get things done.. well.. i have built something that is Closer... using the generator plugin i can connect thought a web-socket and inject javascript in Photoshop.. technically you are able to do anything that can be done using photoshop scripting guide.... (Including manipulating existing PDS)
This library https://github.com/Milewski/generator-exporter exports all the marked layers with a special syntax as its desired format...
this code could run on the server.. using nodejs
import { Generator } from 'generator-exporter'
import * as glob from 'glob'
import * as path from 'path'
const files = glob.sync(
path.resolve(__dirname, '**/*.psd')
);
const generator = new Generator(files, {
password: '123456',
generatorOptions: {
'base-directory': path.resolve(__dirname, 'output')
}
})
generator.start()
.then(() => console.log('Here You Could Grab all the generated images and send back to client....'));
however i wouldn't recommend using this for heavy usage with too many concurrent tasks... because it needs photoshop installed locally... Photoshop GUI will be initialized.. this process is quite slow. so it doesn't really fit for a busy workflow.