html如何在手机上播放背景音乐

html-css011

html如何在手机上播放背景音乐,第1张

给你一行代码，你把它插在你的HTML文件中就可以播放背景音乐了。

<audio src="song.mp3" autoplay></audio>

请确保当前文件夹内有名为song.mp3的音乐文件。

IOS不允许自动播放背景音乐。android的话javascript可以使用<audio>标签，然后在下方增加一段该标签的play()动作。例如<audio id="bgaudio"src="sound.wav"></audio><script type="text/javascript">document.getElementById('bgaudio').play()</script>

HTML5的Audio标签，目前的主流浏览器都支持，只不过各种浏览器对音频的支持的格式不同，当前，audio 元素支持三种音频格式：

IE 9                支持  MP3

Firefox 3.5     支持  Ogg Vorbis、Wav

Opera 10.5    支持  Ogg Vorbis、Wav

Chrome 3.0   支持  Ogg Vorbis、MP3

Safari 3.0       支持  MP3、Wav

html5标签audio的autoplay属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在iphone上无法自动播放。

各种查阅资料后发现原来iphone公司是考虑到用户可能是用手机流量访问的情况，为了用户流量着想，所以需要用户交互后才能播放。虽然苹果公司是出于好心，但是如果网页打开之后还需要一个交互才能听到美妙的背景音乐，那么网站的体验效果自然差了很多。可是这种问题要怎么解决呢？

冥思苦想了很久，终于做了一个艰难的决定。于是乎就这样尝试了一下：

$(function(){

$("#audio")[0].play() 

})

没想到竟然好用！！！

全部的代码是这样

<html>

<head>

<script src="js/jquery.js"></script>

</head>

<body>

<audio id="audio" src="song.mp3" autoplay="autoplay">

您的浏览器不支持audio标签。

</audio>

$(function(){

$("#audio")[0].play()

})

</body>

</html>