HTML5 combined with javascript to implement a simple music player-H5 Tutorial-php.cn

Table of Contents

一月，银装轻舞-紫竹笛韵

Home

Web Front-end

H5 Tutorial

HTML5 combined with javascript to implement a simple music player

王林

Dec 22, 2020 am 09:54 AM

html5 javascript music player

HTML5 combined with javascript to implement a simple music player

Let’s take a look at the final implementation first:

(Learning video sharing: html5 video tutorial)

HTML5 combined with javascript to implement a simple music player

1. HTML code

<div id="music">
	<div id="container">
		<h3 id="一月-银装轻舞-紫竹笛韵">一月，银装轻舞-紫竹笛韵</h3>
		<img  src="/static/imghw/default1.png"  data-src="image/一月，银装轻舞-紫竹笛韵.jpg"  class="lazy"   id="musicImg" alt="HTML5 combined with javascript to implement a simple music player" >
		<audio src="./music/一月，银装轻舞-紫竹笛韵.mp3" controls id="audio"></audio>
		<div class="btn">
			<button id="play">play</button>
			<button id="pause">pause</button>
			<button id="prev">prev</button>
			<button id="next">next</button>
		</div>
	</div>
</div>

Copy after login

2. Implementation of playback and pause switching effects

// 播放
play.onclick = function(){
	if(audio.paused){
		audio.play();
	}
}
 
// 暂停
pause.onclick = function(){
	if(audio.played){
		audio.pause();
	}
}

Copy after login

Automatically switch to the next song

audio.addEventListener(&#39;ended&#39;,function(){
	next.onclick();
},false);

Copy after login

3.When switching songs The song image and the current background also change accordingly

// 上一首
prev.onclick = function(){
	num = (num + len - 1) % len;
	audio.src = &#39;./music/&#39; + music[num] + &#39;.mp3&#39;;
	musicName.innerHTML = music[num];
	bgImage.style.backgroundImage = &#39;url(./image/&#39; + music[num] + &#39;.jpg)&#39;;
	musicImg.src = &#39;./image/&#39; + music[num] + &#39;.jpg&#39;;
	audio.play();
}
 
// 下一首
next.onclick = function(){
	num = (num + 1) % len;
	audio.src = &#39;./music/&#39; + music[num] + &#39;.mp3&#39;;
	musicName.innerHTML = music[num];
	bgImage.style.backgroundImage = &#39;url(./image/&#39; + music[num] + &#39;.jpg)&#39;;
	musicImg.src = &#39;./image/&#39; + music[num] + &#39;.jpg&#39;;
	audio.play();
}

Copy after login

4. To achieve transparent background image and opaque content effect

#music {
	width: 500px;
	height: 500px;
	border-radius: 10px;
	margin: 20px auto;
	position: relative;
	background: url(./image/一月，银装轻舞-紫竹笛韵.jpg) no-repeat;
	background-size: cover;
	text-align: center;
}
#container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 500px;
	height: 500px;
	text-align: center;
	background:rgba(255,255,255,0.6);
}

Copy after login

Related recommendations: html5 tutorial

The above is the detailed content of HTML5 combined with javascript to implement a simple music player. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn