/ / Як музичний плеєр постійно грає на сайті - javascript, iframe, музичний плеєр

Як безперервно відтворювати музичний плеєр на сайті - javascript, iframe, music-player

Привіт, я просто хочу попросити допомоги, я планую створити сайт, де я зможу транслювати в прямому ефірі як онлайн-радіо. Наприклад, як ця сторінка https://www.hospitalrecords.com/ програвач внизу ніколи не зупиняється, навіть якщо ви переглядаєте весь сайт. Це javascript? або Iframe? Спасибі заздалегідь

Артур

Відповіді:

2 для відповіді № 1

вам слід виправити нижній колонтитул сторінки, дотримуючись

    In CSS:
.Footer{
background-color:black;
height:50px;
color: white;
position: fixed;
width:100%;
}

а потім додайте звуковий тег до нижнього колонтитула ... У html5 (блокнот):

<body>
<footer class="Footer">
<!-- here you can add different audio plugin... but I am using html5 audio for example.. -->
<audio control auto play loop>// it will loop through the music file
<source src ="alam.mp3" type="audio/mpeg"/>
<source src ="alam1.mp3" type="audio/mpeg"/>
</audio>
</footer>
</body>

сподіваюся, це буде підходящим ...


0 для відповіді № 2

Я насправді не знайомий з Iframes, але цеможна зробити за допомогою JavaScript. Загальною ідеєю було б визначити тіло, яке змінюється як основний div, та змінити вміст цього div, коли натискається вкладка. Я майже впевнений, що існує більш елегантний спосіб, але ви можете використовувати його Отже, ви будете використовувати lib. JS під назвою Jquery, я не знаю, чи знайомі ви з цим. Ваша сторінка фактично складатиметься з одного документа HTML і матиме загальний макет (дивлячись на приклад сторінки, яку ви надіслали)

 <html>
<body>

<div class="jumbotron"> // This will be div, with a background img
<ul class="nav"> // This will be you nav bar
<li id="1"> </li>
<li id="2>  </li>
</ul> // For the sake of simplicity I just have 2 tabs
</div>
<div id="mainbody"> ..bunch of initial html</div>
<div class="footer"> </div> this is the music player
</body>
</html>

Для кожної вкладки в Jquery:

  $(document).ready(function(){
$("#1").click(function(){
$("#main").html(...."the html of the body you want"...)
}

$("#2").click(function(){
$("#main").html(...."the html of the body you want"...)
}
})

Оскільки я припускаю, що ваш html ускладниться, ви можете використовувати .load () замість .html () Детальніше про них читайте тут http://api.jquery.com/html/ http://api.jquery.com/load/