בנו ממיר MP4 ל-MP3 עם Claude Code

מה אתה בונה

אי פעם העלית וידאו לאתר כלשהו רק כדי לשלוף את הקול? פרטיות מפוקפקת, הגבלות גודל קבצים, פרסומות בכל מקום. בטוטוריאל הזה, אתה תבנה ממיר משלך שרץ על המחשב שלך. גרור וידאו, קבל MP3. בלי העלאה לזרים. בלי הגבלות.

בסוף, יהיה לך אפליקציית וב מעוצבת עם גרירה והטלה, שורת התקדמות וכפתור הורדה — וגם תבין איך הכל מחובר.

למה זה חשוב

המרת וידאו לקול היא אחד הדברים הנפוצים ביותר שאנשים עושים באינטרנט. פודקאסטרים שולפים קול מראיונות וידאו. סטודנטים שולפים הקלטות הרצאות כדי להאזין בעת תנועה. מוזיקאים שולפים דוגמות מסרטונים. יוצרי תוכן מחזיקים קטגוריה של וידאו לקול בפלטפורמות שונות.

וכמעט כולם עושים זאת באתר כלשהו.

הנה הבעיה: בכל פעם שאתה מעלה קובץ לממיר מקוון חינמי, הקובץ הזה יושב בשרת של מישהו אחר. אין לך שום שליטה מה קורה לו. Kaspersky, Bitdefender וגם ה-FBI הזהירו שאתרי ממיר חינמיים הם וקטור גדל למלוות, קטיף נתונים וכופר. חלק מהאתרים האלה שקטות מחלצים מידע אישי מהקבצים שלך.

לכן קיימים ממירים מקומיים. פרויקטים כמו VERT, ConvertX ו-LocalConverter יש להם אלפי משתמשים שעברו לכלים שרצים על המכונה שלהם — הקבצים לא יוצאים מהמחשב שלך.

מתחת להנדסה, כמעט כולם משתמשים באותו מנוע שאתה עומד להשתמש בו: FFmpeg. זה הטכנולוגיה בקוד פתוח מאחורי עיבוד הווידאו של YouTube, נגן VLC, HandBrake וכמעט כל כלי מדיה שאי פעם השתמשת בו. כשאתה בונה עם FFmpeg, אתה משתמש בטכנולוגיה שמעבדת מיליארדי סרטונים ביום.

הטוטוריאל הזה לא רק על המרת קבצים. זה על למידה שאתה יכול לבנות כלים שאתה בעצם משתמש בהם.

לפני שאתה מתחיל

פתח את הטרמינל שלך וודא שאלה מותקנים:

node -v

אתה צריך לראות מספר גרסה. אם לא, התקן את Node.js מ-nodejs.org.

ffmpeg -version

אתה צריך לראות מידע גרסה. אם לא, הרץ brew install ffmpeg (Mac) או sudo apt install ffmpeg (Linux).

עכשיו צור תיקייה ריקה לפרויקט, פתח אותה בטרמינל שלך, והתחל Claude Code.

ציון דרך 1: צור את האפליקציה עם ממשק ניתן.

אנחנו הולכים לבקש מ-Claude Code לבנות את שלד הפרויקט כולו — השרת, דף הוב, והעיצוב — בבת אחת.

הנושא:

Build me a video to MP3 converter web app. Create a Node.js server using Express that runs on port 3001. Make a nice-looking web page with a dark gradient background and a white card in the center. The card should say "MP4 to MP3 Converter" with a subtitle "Convert your video files to audio". Add a drag-and-drop area where users can drop their video file, with an upload icon and a "Choose File" button as a fallback. Use a purple/indigo color theme. When someone selects a file, show the file name and size, and show a "Convert to MP3" button.

מה Claude Code עושה: זה יוצר את הפרויקט השלם שלך מהתחלה — קובץ שרת שמריץ את האפליקציה שלך, דף וב עם עיצוב, ו-JavaScript שמטפל בגרירה והטלה. הנושא אחד יצר דף וב עובד לחלוטין עם תכונות אינטראקטיביות. זה כוחה של תיאור מה שאתה רוצה בשפה פשוטה.

נסה זאת: הרץ את שני הפקודות האלה בטרמינל שלך:

npm install
npm start

פתח את הדפדפן שלך ל-http://localhost:3001. אתה צריך לראות דף אפל מלוטש עם כרטיס לבן. נסה לגרור קובץ וידאו עליו — שם הקובץ וכפתור המרה צריכים להופיע.

יש לך חזית עובדת. עכשיו בואו נגרום להמרה בעצם להתרחש.

ציון דרך 2: הגרם להמרת וידאו בעצם

כרגע הכפתור לא עושה כלום. בואו נוסיף את המנוע שלוקח קובץ וידאו והופך אותו ל-MP3.

הנושא:

Now add the actual conversion. When someone clicks the convert button, upload the video to the server, convert it to MP3 using ffmpeg, and save the result. Show a progress bar while it's uploading and converting. After the conversion is done, show a success message with a green checkmark and a "Download MP3" button. Also add a "Convert Another" button to start over. Make sure the server cleans up temporary files after each conversion so they don't pile up.

מה Claude Code עושה: זה מוסיף את המוח של האפליקציה שלך. השרת כעת מקבל קבצי וידאו, משתמש ב-FFmpeg (אותו כלי שYouTube משתמש בו) כדי לשלוף את הקול, וחוסך אותו כ-MP3. בדף הוב, זה מוסיף שורת התקדמות שמתמלאת בזמן שאתה מחכה, ומסך הורדה כשהוא מוכן. Claude Code חיבר את הקדמה, האחורה, וכלי מדיה מקצועי — הכל מנושא אחד.

נסה זאת: עצור את השרת (לחץ Ctrl+C), ואז הרץ:

npm install
npm start

(אנחנו מריצים npm install שוב כי Claude Code הוסיף חבילות חדשות.)

עכשיו עבור לדפדפן שלך, שחרר קובץ וידאו, ולחץ "Convert to MP3". צפה בשורת ההתקדמות מתמלאת. כשהיא סיימה, לחץ הורדה והשמע את MP3 באפליקציית המוסיקה שלך.

זה עובד. בדיוק בנית ממיר אמיתי.

ציון דרך 3: הגרם לו להיות חכם יותר בנושא שגיאות

מה קורה אם מישהו מנסה להעלות מסמך Word במקום וידאו? או אם משהו הולך לא בסדר במהלך ההמרה? כרגע האפליקציה רק תישבר בשקט. בואו נתקן את זה.

הנושא:

Add error handling. Only allow video files to be uploaded (mp4, mov, avi, mpeg). If someone tries to upload a non-video file, show them a clear error message. If the conversion fails for any reason, show an error and clean up any leftover files. Also make sure the progress bar doesn't freeze during conversion — add a smooth animation that keeps it moving while the server is working.

מה Claude Code עושה: זה מוסיף אימות — האפליקציה כעת בודקת את סוג הקובץ לפני שהיא מקבלת אותו, ומציגה הודעות שגיאה שימושיות במקום שישבור בשקט. זה גם הופך את שורת ההתקדמות לחלקה יותר: במהלך ההעלאה היא מציגה התקדמות אמיתית, ובמהלך ההמרה היא מציגה אנימציה עדינה כדי שהמשתמש יידע שהאפליקציה עדיין עובדת. אפליקציות טובות לא רק עובדות כשהכל הולך לפי התוכנית — הן מטפלות בדברים בחן כשמשהו לא בסדר.

נסה זאת: הפעל את השרת מחדש. נסה להעלות קובץ שאינו וידאו (כמו PDF או תמונה) — אתה צריך לראות הודעת שגיאה. ואז העלה וידאו אמיתי וצפה בשורת ההתקדמות. זה צריך לאנימציה בצורה חלקה כל הדרך, עם כותרת "Converting..." פעימה בזמן שהיא עובדת.

ציון דרך 4: הגרם לזה להיראות מקצועי

האפליקציה עובדת מעולה. בואו נוסיף כמה מגעים אחרונים כדי לגרום לה להרגיש מלוטשת.

הנושא:

Polish the UI. Add hover effects on the buttons (slight lift and shadow). Make the drop zone highlight with a purple border when you drag a file over it. Add a smooth transition when switching between the upload screen, the progress screen, and the download screen. Make sure the whole thing looks good on mobile too.

מה Claude Code עושה: זה מוסיף CSS transitions ועיצוב תגובתי. הכפתורים מתרימים כשאתה מרחף עליהם. אזור השחרור מדליק כשאתה גוררת עליו. מסכים דועכים בין מדינות במקום להופיע ופתע. והפריסה מתאימה עצמה למסכים קטנים יותר. פרטים קטנים אלה הם מה שמבדיל "דבר שעובד" מ"דבר שמרגיש טוב להשתמש".

נסה זאת: הפעל את השרת מחדש. מרח על הכפתורים — הם צריכים להתרים מעט. גרור קובץ על אזור הטיפול בלי לשחרר — הגבול צריך להפוך לסגול. נסה זאת בטלפון שלך (השתמש בכתובת ה-IP של המחשב במקום localhost). כל הזרימה צריכה להרגיש חלקה ותגובתית.

מה בנית

ממיר וידאו לקול מלא הרץ על המכונה שלך:

• דף וב עם בחירת קובץ גרירה והטלה
• שרת המומר וידאו ל-MP3 באמצעות אותה טכנולוגיה כמו YouTube
• שורת התקדמות שמעדכנת אותך כל הדרך
• טיפול בשגיאות שלא נותן לדברים להישבר בשקט
• עיצוב נקי ותגובתי שעובד בכל מסך

ארבעה נושאים. אפליקציה אחת עובדת. הקבצים שלך לא מעזבים את המחשב שלך.

קח זאת יותר רחוק

הנה כמה רעיונות להמשיך בבנייה:

• קבצים מרובים — תן למשתמשים להטיל כמה וידאו בו זמנית והמיר אותם כולם
• בחר את הפורמט שלך — הוסף רשימה נפתחת בחירת MP3, WAV או FLAC
• תצוגה מקדימה של קול — הוסף כפתור הצגה כדי שמשתמשים יוכלו להאזין לפני הורדה