onclick button change playing status, replace main block
This commit is contained in:
		@@ -6,11 +6,22 @@ body {
 | 
				
			|||||||
  background-size: cover;
 | 
					  background-size: cover;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.parent {
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					    height: 100%;
 | 
				
			||||||
 | 
					    position: fixed;
 | 
				
			||||||
 | 
					    top: 0;
 | 
				
			||||||
 | 
					    left: 0;
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    align-items: center;
 | 
				
			||||||
 | 
					    align-content: center; 
 | 
				
			||||||
 | 
					    justify-content: center; 
 | 
				
			||||||
 | 
					    overflow: auto;   
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
#song{
 | 
					#song{
 | 
				
			||||||
  width: 400px;
 | 
					  width: 400px;
 | 
				
			||||||
  height: 300px;
 | 
					  height: 340px;
 | 
				
			||||||
  margin: auto;
 | 
					 | 
				
			||||||
  justify-content : center;
 | 
					 | 
				
			||||||
  background-color: rgba(0, 0, 0, 0.7);
 | 
					  background-color: rgba(0, 0, 0, 0.7);
 | 
				
			||||||
  border-radius: 10px;
 | 
					  border-radius: 10px;
 | 
				
			||||||
  color: #fff;
 | 
					  color: #fff;
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -16,13 +16,12 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
<body>
 | 
					<body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div class="parent">
 | 
				
			||||||
	<div id="song">
 | 
						<div id="song">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		<h1>Just Radio</h1>
 | 
							<h1>Just Radio</h1>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
		now playing:
 | 
							<div id="myPlay">-</div>
 | 
				
			||||||
 | 
					 | 
				
			||||||
		<br>
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
		<div id="title">title</div>
 | 
							<div id="title">title</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@@ -53,15 +52,19 @@
 | 
				
			|||||||
		<div id="listeners">title</div>
 | 
							<div id="listeners">title</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	</div>
 | 
						</div>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<script language="JavaScript">
 | 
					<script language="JavaScript">
 | 
				
			||||||
	var audio = new Audio('http://stream.santic-zombie.ru');
 | 
						var audio = new Audio('http://stream.santic-zombie.ru');
 | 
				
			||||||
	var play = document.getElementById('play');
 | 
						var play = document.getElementById('play');
 | 
				
			||||||
	play.addEventListener('click', function() {
 | 
						play.addEventListener('click', function() {
 | 
				
			||||||
 | 
							$("#myPlay").text("Now playing:");
 | 
				
			||||||
		audio.play();
 | 
							audio.play();
 | 
				
			||||||
	}, false);
 | 
						}, false);
 | 
				
			||||||
	var pause = document.getElementById('pause');
 | 
						var pause = document.getElementById('pause');
 | 
				
			||||||
	pause.addEventListener('click', function() {
 | 
						pause.addEventListener('click', function() {
 | 
				
			||||||
 | 
							 $("#myPlay").text("Paused");
 | 
				
			||||||
	     audio.pause();
 | 
						     audio.pause();
 | 
				
			||||||
	}, false);
 | 
						}, false);
 | 
				
			||||||
	var volume = document.getElementById('volume');
 | 
						var volume = document.getElementById('volume');
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user