网页中播放音乐的3种方法(不同浏览器不一定能播放)

学习笔记 马富天 2016-05-05 10:26:27 86 0

【摘要】介绍了在网页中插入音乐的3种方式。

网页完整代码如下:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>网页中播放音乐的3种方法(不同浏览器不一定能播放)</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">					
  7. 			*{
  8. 				margin:0;
  9. 				padding:0;
  10. 				font-size:12px;
  11. 			}
  12. 		</style>
  13. 	</head>
  14. 	<body>
  15. 		<br /><br />
  16. 		第一种方式使用:<br />
  17. 		&lt;embed src="Alan Walker - Fade.mp3"  autostart="true" playcount="true" loop="true" /&gt;
  18. 		<br /><br />
  19. 		效果如下:
  20. 		<br /><br />
  21. 		<embed src="Alan Walker - Fade.mp3"  autostart="true" playcount="true" loop="true" />
  22. 		
  23. 		<br /><br />
  24. 		第二种方式使用:<br />
  25. 		&lt;audio preload="auto" src="Alan Walker - Fade.mp3" autoplay="autoplay" loop="loop" controls="" /&gt;您的浏览器不支持此音频播放,请使用IE9及以上或者chrome,safari浏览器。&lt;/audio&gt;
  26. 		<br /><br />
  27. 		效果如下:
  28. 		<br /><br />		
  29. 		<audio preload="auto" src="haoyunlai.mp3" autoplay="autoplay" loop="loop" controls="">您的浏览器不支持此音频播放,请使用IE9及以上或者chrome,safari浏览器。</audio>
  30. 		<br /><br />
  31. 		第三种方式使用:<br />
  32. 		&lt;object data="Alan Walker - Fade.mp3" type="application/x-mplayer2" width="0" height="0"&gt;
  33. 		    &lt;param name="src" value="music.mp3"&gt;  
  34. 		    &lt;param name="autostart" value="1"&gt;   
  35. 		    &lt;param name="playcount" value="infinite"&gt;
  36. 		&lt;/object&gt;
  37. 		<br /><br />
  38. 		效果如下:
  39. 		<br /><br />		
  40. 		<object data="Alan Walker - Fade.mp3" type="application/x-mplayer2" width="0" height="0">   
  41. 		    <param name="src" value="music.mp3">   
  42. 		    <param name="autostart" value="1">   
  43. 		    <param name="playcount" value="infinite">   
  44. 		</object>
  45. 	</body>
  46. </html>

在不同浏览器中的效果

请输入图片名称请输入图片名称

由此可知,最通用的一种嵌入音乐的方式是:

  1. <embed src="Alan Walker - Fade.mp3"  autostart="true" playcount="true" loop="true" />

版权归 马富天个人博客 所有

本文标题:《网页中播放音乐的3种方法(不同浏览器不一定能播放)》

本文链接地址:http://www.mafutian.com/88.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

1

0

上一篇《 PHP微信开发快速入门 》 下一篇《 怎么实现MySQL数据库的双热机备份(数据库主从分离) 》

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多