השמעת קובץ אודיו מהשרת בצד לקוח

clickone

@nigun
אתה רוצה לתת ללקוח אפשרות לראות ולשמוע קבצים על תיקייה מסויימת? (ואולי גם להעלות?)
יש המון file manager באינטרנט עם שם משתמש וסיסמא ובחירת תיקייה מסויימת
הנה לדוגמא
https://github.com/jcampbell1/simple-file-manager

nigun

@clickone
בהתחלה השתמשתי בfile manager
אבל הוא התלונן על העיצוב ועל הטורים המיותרים
הגעתי למסקנה שיותר קל לבנות דף HTML פשוט מאשר לחפור בקוד הלא קריא שהיה בfile manager
(וגם על הדרך הזדמנות ללמוד HTML וJS)

nigun

@ליבל
איפה אני ישים את זה?
בתחתית העומד זה לא משתלב יפה
ובדף נפרד אני לא יודע איך לשלוח את של הקובץ (בלי שימוש בצד שרת)

dovid

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

nigun

@dovid אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:

שאלה מצויינת! באמת.

אצלך זה מושמע בדפדפן ולא יורד?

להוסיף אלמנט div למסמך עם קוד JS בעת לחיצה, אתה יודע?

אצלי זה לא יורד (אני נכנס לכתובת של הקובץ בעצמו ושם יש את האלמט שליבל הזכיר עם רקע שחור)
כנראה אני יכול ללמוד איך לעשות את זה
(לכאורה זה פקודה של הדפסה למסמך)

dovid

@nigun
ב2 אתה יכול ללמוד גם פה.
אני מתחיל מהפתרון של @ליבל, נניח זה השורה:

 <div>
    הודעה_15 
    <a onclick="listen('/files/audio/הודעה_15.mp3')" >השמעה</a>
    <video style="display: none"  src="/files/audio/הודעה_15.mp3" id="/files/audio/הודעה_15.mp3"  />
 </div>

הקוד צריך להיות משהו כזה:

<script>
    //לוודא שה פועל אחרי שכל המסמך נטען, למשל לשים לפי התגית הסוגרת של בודי או סתם בסוף
    function listen(file){
        document.getElementById(file).style.display = 'block';
    }
</script>

nigun

@dovid
מה שאני מבין
זה טוען את האלמנט מהתחלה במצב מוסתר והופך אותו לגלוי כשמפעילים את הפונקציה
האם לא יותר אלגנטי לעשות פונקציה שמוסיפה את האלמט video בתחתית הדף עם הערך file
ולהוסיף HTML מסביב בשביל שישתלב יפה

ליבל

@nigun אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:

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

אתה בטוח ? לי נראה שזה טוען את כל הקבצים כדי שלא יהיה מצב שבו הדפדפן מחכה שהקובץ יטען (מה שקורא לי הרבה ב jdn)

nigun

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

dovid

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

 <div>
    הודעה_15 
    <a onclick="listen('/files/audio/הודעה_15.mp3')" >השמעה</a>
 </div>
....
<div id="player-area">
</div>

קןד:

function listen(file){
    var playerArea = document.getElementById('player-area');
    playerArea.innerHTML = "<video src=" +  file +  " ></video>";
}

nigun

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

dovid

@nigun אתה קופץ.
קודם חייב לעבוד לך (יכול להיות שהטעות שלי, אבל אתה חייב לעבור שלב שלב).
תשתמש אם אתה רוצה בעורכי קוד אונליין כדי לשתף אותנו בדוגמא שלא עובדת.

nigun

@dovid
זה מה שכתבתי בקובץ HTML

<html>

<body>

 <div>
    הודעה_15 
    <a onclick="listen('http://mysite/123.mp3')" >השמעה</a>
 </div>
<div id="player-area">
</div>

     <script>

function listen(file){
    var playerArea = document.getElementById('player-area');
    playerArea.innerHTML = "<video src=" +  file +  " ></video>";
}
    </script>

</body>
  
</html>

יוסף בן שמעון

@nigun אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:

<div> הודעה_15 <a onclick="listen('http://mysite/123.mp3')" >השמעה</a> </div> <div id="player-area"> </div> <script> function listen(file){ var playerArea = document.getElementById('player-area'); playerArea.innerHTML = "<video src=" + file + " ></video>"; } </script>

ויש שגיאות בקונסול?

nigun

@יוסף-בן-שמעון
יש שגיאה שהקובץ לא נמצא
אני ינסה לתקן

nigun

@יוסף-בן-שמעון
כשאני שם קובץ קיים לא מופיע שום שגיאה בקונסול
ולא מופעל שום קובץ

יוסף בן שמעון

@nigun נסה את זה

<html>
 
<body>
 
 <div>
    הודעה_15 
    <a onclick="listen('http://mysite/123.mp3')" >השמעה</a>
 </div>
<div id="player-area">
</div>
 
     <script>
 
function listen(file){
    var playerArea = document.getElementById('player-area');
    playerArea.innerHTML = "<video controls src=" +  file +  " ></video>";
}    </script>
 
</body>
  
</html>

nigun

@יוסף-בן-שמעון אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:
עכשיו זה עובד!

nigun

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

yossiz

@nigun אין דרך סטנדרטית לעצב אלמנט אודיו או וידיאו על ידי CSS. יש את זה אבל זה עובד רק בכרום וחביריו. אני גם לא יודע כמה שליטה זה ייתן לך.
מה שעושים בד"כ זה להסתיר את הנגן המובנה ובמקומו לעצב נגן אחר כיד הדמיון הטובה עליך שישלוט בנגינת המדיה על ידי JS.
יש גם ספריות מוכנות שאפשר להתשמש בהם. (לדוגמה זה או זה או זה)
מכיון שאין לי נסיון אני לא יכול להמליץ.

תחומים - פורום חרדי מקצועי

השמעת קובץ אודיו מהשרת בצד לקוח