<audio controls>
type:指定文件类型
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
对应的参数属性如下图:
网页设计与制作音乐播放界面需要在页面中插入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、在浏览者进行浏览,就可以发现点击播放后就响起音乐来了。
HTML代码,其中使用HTML5标签有audio、input中type="range"标签。“播放列表”的li标签太长,合并缩起来如下:CSS代码
输入相应的CSS代码
JavaScript代码
获取HTML元素,包括点击的按钮,图片,播放列表等
音量按钮的JavaScript代码
设置自动播放、播放文件、播放音量、播放时间、播放切换的JavaScript代码
上一首点击按钮JavaScript代码
下一首点击按钮JavaScript代码
点击列表播放JavaScript代码
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)