html5结合javascript实现简易音乐播放器

百变鹏仔 3个月前 (10-17) #H5教程

文章标签播放器

我们先来看下最终的实现效果：

（学习视频分享：html5视频教程）

1、HTML代码

立即学习“Java免费学习笔记（深入）”；

<div id="music"><div id="container">	<h3 id="musicName">一月，银装轻舞-紫竹笛韵</h3>	<img  src="image/一月，银装轻舞-紫竹笛韵.jpg" id="musicImg" alt="html5结合javascript实现简易音乐播放器" >	<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>

2、播放暂停切换效果实现

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

自动切换下一首

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

3、歌曲切换时歌曲图片与当前背景也随着改变

// 上一首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();}

4、实现背景图片透明，内容不透明效果

#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);}

文章推荐

html5结合javascript实现简易音乐播放器

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集