Как стать автором
Обновить

Как сделать фоновую музыку на сайте

Время на прочтение3 мин
Количество просмотров5.9K
Возник сегодня вопрос: Как без использования флеша на сайте разместить фоновую музыку и, главное, чтобы при переходе по страницам музыка не переставала проигрываться не начинала проигрываться заново?

Немного погуглив и подумав, пришел к решению: при заходе на сайт разрешении пользователя (например нажатие на кнопку «включить музыку») яваскрипт открывает и скрывает маленькое окошко, и уже в нем «играет» фоновая музыка.

Итак, непосредственно реализация:

index.html — главная

<html>
  <head>
    <title>Главная страница</title>
    <script>
      function openPage()
      {
        var newwin = window.open('bgsound.html','ert','scrollbars=0, resizable=0, titlebar=1, height=20, width=320' );
        newwin.blur(); // скрываем окно с фоновой музыкой
      }
    </script>
  </head>
  <body onload="openPage()">
    <a href="otherpage.html"> Перейти и послушать музыку на другой странице, вдруг не играет? </a>
  </body>
</html>


* This source code was highlighted with Source Code Highlighter.



bgsoung.html — страница с фоновой музыкой
<html>
  <head>
  <title>Фоновая музыка (для тишины просто закройте окно)</title>
    <script>
      <!--
      function player()
      {
        // Узнаем операционную систему
        var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1;
        if (isWin)
        {
         visitorOS="Windows";
        }
        else
        {
         visitorOS="Other";
        }
      
        var objTypeTag = "application/x-mplayer2"; // для Windows
        if (visitorOS != "Windows") { objTypeTag = "audio/mpeg"}; // Для остальных ОС
       
        document.writeln("<object data='sound.mp3' type='" + objTypeTag + "'>");
        document.writeln("<param name='filename' value='sound.mp3' />");
        document.writeln("<param name='autoplay' value='true'>");
        document.writeln("<param name='playcount' value='0'>");
        document.writeln("</object>");
        document.close();
      }
      // -->
    </script>
  </head>
  <body >
    <script>
      player();
    </script>
  </body>
</html>


* This source code was highlighted with Source Code Highlighter.


otherpage.html — какая-тот другая страница
<html>
  <head>
    <title>Другая страница</title>
  </head>
  <body >
    Играет!
    <a href="index.html"> На главную? </a>
  </body>
</html>


* This source code was highlighted with Source Code Highlighter.


UPD
Обращаю внимание, что нецелесообразно включать музыку (звук) без разрешения пользователя.
Теги:
Хабы:
Всего голосов 88: ↑13 и ↓75-62
Комментарии31

Публикации