网页设计与制作音乐播放界面如何播放音乐

网页设计与制作音乐播放界面需要在页面中插入HTML5的音频标签audio，即可播放音乐。

工具／原料：

华硕DN20

win10

浏览器1.026

1、先打开常用的网页设计的软件，然后新建一个网页文件。

2、进行一个简单的页面布局，让音乐播放器显示在网页的中间。并添加简单的样式。

<style type="text/css">

#music_player{width:400pxheight:150pxbackground:#ff9966margin:200px auto}

</style>

<div id="music_player" class=""></div>

3、在浏览器中进程预览，看下位置是否合适。

4、利用HTML5的标签audio标签进行音乐播放器的设置。

<div id="music_player" class="">

<audio controls>

<source src="D:\KuGou\苍鹰－拜秦陵．mp3" type="audio/mpeg">

</audio>

</div>

5、播放器设置好以后，我们在＜source src="歌曲地址＂＞插入歌曲的地址，就可以自动播放了。例如：

<audio controls>

<source src="D:\KuGou\苍鹰－拜秦陵．mp3" type="audio/mpeg">

</audio>

6、在浏览者进行浏览，就可以发现点击播放后就响起音乐来了。

可以使用html5的audio标签来添加音乐播放器

<audio controls>

type:指定文件类型  

<source src="horse.ogg" type="audio/ogg">

   <source src="horse.mp3" type="audio/mpeg">

</audio>

对应的参数属性如下图：

环形音乐播放器

这款超级酷炫的HTML5音乐播放器是环形的，看起来好像是一个唱片封面，背景图片很漂亮，设置了播放键、音量调整键、快进和后退键，可谓功能齐全、外观靓美。还在苦恼不知道怎么用HTML5设计音乐播放器的朋友可以学习一下。

超级带感的HTML5音乐播放器

这个音乐播放器的背景全部是黑色的，但不是纯黑，带有黑色质感状，外观看起来非常酷炫。虽然整体看起来并不是很复杂，但是功能可不小。播放、暂停、快进、后退、音量控制一个都不少。

酷炫视频播放器

这个视频播放器同样可以用来播放音乐、MV，这是一款UI界面设计非常出色的HTML播放器，整个界面非常简单，好像在看一部电影大片，设置了播放/暂停、音量调节等，这款播放器最大的特点就是可以全屏观看，支持视频和音频播放。

看了这么多酷炫的播放器设计，学习HTML5开发的朋友们，你们有什么想法吗？随着HTML5技术的快速发展，越来越多的HTML5作品设计也更加酷炫。还会有更多有关HTML5作品设计的内容跟大家分享，大家请多多关注。

---