I'm fairly new to react and my javascript knowledge is still at the beginner level. I'm building a website in react which will feature multiple audio playlists.
I'm a bit lost of where to start next. I've built the layout of the audio player which features a "content" area (which will list the trackname, artist, length in a column like a spotify playlist) and the "player controls" area (which will feature playback controls..play,pause,previous,next,volume etc.
What's the best method to link a folder of audio items (mp3,.wav) to populate the "content" area with the per item audio info (title, artist, length).
I know this would involve setting up an array or object, but I've also seen it done with json (not sure how this works)
Whatever the solution, I want this to be fairly simple to create new playlists with different content to display on different pages of the site.
I have some questions about the player controls logic as well, but I want to get the display working properly first.
I'd appreciate any info, guidance, or example code to lead me in the right direction as I'm still quite a beginner. Thank you in advance.
Cheers
Related
I'm looking to implement a video editing feature like that of featured here https://clideo.com/video-editor.
I'm planning to use Vue 3 with a Laravel backend, but is there an ideal framework to use for a web application like this, or should I just try to reverse engineer/hack my way to a working implementation?
Sorry if this is the wrong place to ask, I just haven't been able to find an answer.
Thanks
Video editor consist of two important parts
1)A Timeline that represents sequence.
2)A Output window to show output of timeline.
-Clideo uses div and html elements positioning to generate timeline but a better alternative is to use Canvas and draw a timeline on it just like in veed.io
-For video output again you have to use canvas and webGL to draw each and every frame one by one.
you wont be able to edit video on backend and send edited multimedia for each change user makes you need to find a way to do in on client using webcodec.
For the choice of framework if you are having canvas and webGL do all the rendering of timeline and output then it dosent matters you will spend more time with drawing functions.
Almost every video editor has a timeline. But only in some of it (https://wave.video/tools/video-marketing/promo-video-maker) is divided into several ranges. An additional advantage will be the grid on the line. You can also easily manage layers and frames.
I'm new to Lottie, have had some tutorial and tests completed, and got fascinated with the idea of mixing together After Effects animation with HTML5 animation. THANK YOU AB&B GENIES!
We're about to develop an online interactive project in which we'll cover our client's fashion collection.
The problem is, we'll have to use raster PNG images, rather than AE vector, because the client's got an exclusive waterpaint guideline for images.
Please have a look in this (closest) example of image ->Fashion woman waterpaint
We'll have different models (male and female) standing in idle position. Like, breathing, moving a little bit, like they're alive. We're planning to have their body parts and clothes in raster PNG images, animated with AE and exported with Lottie Bodymovin.
Then, we'd like to have [BUTTONS] which would help out the user to change these models clothes, like experimenting new fashion styles, colors, stamps, etc. A limited and pre-set range of PNG clothes will be used, to cover up the new collection.
How does Lottie work with changing such pre-set images, when clicking a button on runtime? Is it possible? The application will be hosted on an online server, and played on browser for an specific event, so no need to think about android or ios this time.
I'd like some references, please, I'm a bit lost around LottieAnimationView and setImageAssetDelegate, both which I can't see how to implement - if those are the proper solutions.
Thank you guys!
Every week for my job, I am given a list of links of videos and have to download them, edit them, and then compile them into a single video. Compiling these videos is easy, but it is super tedious and takes around three hours to make them. I would like to know if there are any programs that could automate this. If not, I would like to write something that would.
I sort of know Java, but am no expert. I think that Javascript would be best for this (I KNOW THAT THEY ARE NOT THE SAME). BUT I have a ton of time and can learn whatever I need to, but I just need to know what I need to learn.
What I need it to be able to do is:
-Be given a list of links that go directly to a video in a webplayer
-download those links to a specific folder
-merge those videos together
-render and download the final video
Any help to make a single part of this or direction in general would be awesome!
I am trying to make a seamless process for creating engineering part drawings that have interactive balloons that will somehow go to the part you clicked. A part balloon contains a part number, I want the user to be able to click that part number to go to that selected part number drawing.
What I am asking help for is if anyone knows or has any recommendations how to achieve this.
We use Solidworks as our CAD software. Currently we create save a copy of the drawing in Solidworks to PDF and that is then converted to an enlarged PNG programmatically. There are currently no hooks, anchors or tags associated with the PNG. The PNG is displayed on our parts browsing website. Currently you cannot interact with the drawing on the webpage other than zooming in and out.
I can change that process to whatever will work, but it needs to be almost completely automated. Any ideas would be appreciated.
So far I have looked into adding JavaScript to the actual PDF document programmatically, but I do not fully understand the interaction between web based JavaScript and PDF JavaScript. There is not much online either, or else I couldn't find it. I have also looked into adding links to the PDF, but i cannot get it to open in the current iFrame when a user clicks a link on the PDF, where i would normally user target="_self" to mitigate this.
Please let me know if I can clarify something, as there is a lot of information and it would be overwhelming to write on here.
I've tried to ask this question before, but I failed completely there. After useful input, I decided to leave that one, and to try again.
I'm looking to create a web-based application where users can draw images built from a set of pre-defined icons. There is a need to be able to save the final image (encoded jpg/png), and also save a "current setup" that can be re-loaded later for further editing (a "settings" file?).
My question : What would be the best approach for this matter? Flash+AS3? HTML5+JS? Something else?
For better understanding of what I want to create, here are 2 screenshots that illustrate in what direction I'm thinking:
The drawing application (made in Flash): http://imgur.com/U4GNKJF
The final created picture: http://imgur.com/aCtxwo1
Thanks in advance, and I really hope I've made my question more clear this time.
Since you need advice...
Draw your icons in some art software (even online) and save as transparent PNG's
Look-up HTML5 Drag & drop tutorials that involve "Canvas". You'll want to meaure the positions of objects dragged (mouse position on Canvas) and their order. The drag function could update a JSON String (this hold entries of items, type, position, etc)
Look-up How to save JSON as text file, also how to parse text file as JSON. This becomes the "settings file".
To save images best use PHP language code. PHP must be installed on the server (most have, or is installable or else get a better host). There are tutorials on how to save an image with content from "snapshot of Canvas"
flash is unsupported on IOS and android mobile browsers and google is giving a lower index to websites using it.
I would use javascript with HTML5 canvas with PIXI.JS ,CreateJS or PANDA.JS.
These libraries make it easier to create the canvas elements you need (draggable objects, buttons ) from sprites and adding event listeners to them.
And drawing graphics on the canvas (lines, shapes).
Since you have a lot of sprites you can pack them in a spritesheet with TexturePacker for faster loading ( and PIXI works great with spritesheets).
You can package this web page to android/ios with phonegap,ionic,crosswalk, cocoonjs etc ( i recommend ionic + crosswalk webview it gives great performance)
for saving i would also use a json file to save the setting . You can use PHP to load and save it.