📜 ⬆️ ⬇️

How to make background music on the site

There was a question today: How can I put background music on the site without using a flash and, most importantly , when I go through the pages, the music doesn’t stop playing and doesn’t start playing again?

Having a little googling and thinking, I came to a decision: when a user’s permission to access the site (for example, pressing the “turn on music” button) javascript opens and hides a small window, and background music “plays” in it.

So, the implementation itself:

index.html - home
')
< 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 .
< 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 .
< 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 - page with background music
< 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 .
< 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 - some other page
< html >
< head >
< title > </ title >
</ head >
< body >
!
< a href ="index.html" > ? </ a >
</ body >
</ html >


* This source code was highlighted with Source Code Highlighter .
< html >
< head >
< title > </ title >
</ head >
< body >
!
< a href ="index.html" > ? </ a >
</ body >
</ html >


* This source code was highlighted with Source Code Highlighter .


UPD
I draw your attention that it is inappropriate to turn on the music (sound) without the permission of the user.

Source: https://habr.com/ru/post/49941/


All Articles