השמעת קובץ אודיו מהשרת בצד לקוח
-
@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 אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:
מה שאני מבין זה לטעון את האלמנט מהתחלה במצב מוסתר ולהפוך אותו לגלוי כשמפעילים את הפונקציה
אתה בטוח ? לי נראה שזה טוען את כל הקבצים כדי שלא יהיה מצב שבו הדפדפן מחכה שהקובץ יטען (מה שקורא לי הרבה ב jdn)
-
בכל מקרה זה לא טוען את כל הוידאו, כי זה מוסתר.
אם רוצים אלמנט אחד שטוענים אותו באודיו המתבקש אפשר ככה:<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>"; }- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
בכל מקרה זה לא טוען את כל הוידאו, כי זה מוסתר.
אם רוצים אלמנט אחד שטוענים אותו באודיו המתבקש אפשר ככה:<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@tchumim.com
-
@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> -
@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 אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:
<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 אמר בהשמעת קובץ אודיו מהשרת בצד לקוח:
<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 נסה את זה
<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 נסה את זה
<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 אין דרך סטנדרטית לעצב אלמנט אודיו או וידיאו על ידי CSS. יש את זה אבל זה עובד רק בכרום וחביריו. אני גם לא יודע כמה שליטה זה ייתן לך.
מה שעושים בד"כ זה להסתיר את הנגן המובנה ובמקומו לעצב נגן אחר כיד הדמיון הטובה עליך שישלוט בנגינת המדיה על ידי JS.
יש גם ספריות מוכנות שאפשר להתשמש בהם. (לדוגמה זה או זה או זה)
מכיון שאין לי נסיון אני לא יכול להמליץ.
