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

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.
יש גם ספריות מוכנות שאפשר להתשמש בהם. (לדוגמה זה או זה או זה)
מכיון שאין לי נסיון אני לא יכול להמליץ.

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

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