HTML5页面播放音乐

H5页面播放音乐其实很简单，只需要用<audio>这个标签就行十分方便。

路径选在音乐所在位置就行了。

<audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

关于点击按钮音乐开启/停止播放的效果做了个简单的例子

<a class="play" id="audioBtn" style="cursor:pointer;" onclick="autoPlay()"></a><audio id="bgMusic" src="js/2.mp3" autoplay preload loop="loop"></audio>

css:

.pause {height: 50px;background: url(images/musicbtn.png) no-repeat;display: block;background-position: 0 bottom;}.play {height: 50px;background: url(images/musicbtn.png) no-repeat;display: block;}

JS:

function autoPlay() {var myAuto = document.getElementById('bgMusic');var btn = document.getElementById('audioBtn');if (myAuto.paused) {myAuto.play();btn.classList.remove("pause");btn.classList.add("play");} else {myAuto.pause();btn.classList.remove("play");btn.classList.add("pause");}}

不过只有这个如果是移动端用到，iphone不会开启是自动播放需要再加一个js

<script type="text/javascript">function audioAutoPlay() {var audio = document.getElementById("bgMusic"),play = function () {audio.play();document.removeEventListener("touchstart", play, false);};audio.play();document.addEventListener("WeixinJSBridgeReady", function () {play();}, false);document.addEventListener('YixinJSBridgeReady', function () {play();}, false);document.addEventListener("touchstart", play, false);}
</script>

在body的onload事件调用即可

效果图：

代码下载：https://download.csdn.net/download/u011498721/10603013

HTML5页面播放音乐相关推荐

如何在HTML5页面播放加密视频
如何在HTML5页面播放加密视频 - Polyv blog 如何在HTML5页面播放加密视频 Polyv移动端加密默认是可以直接支持HTML5浏览器播放的,如果担心视频在移动端被下载, 需要在Poly ...
音乐平台项目的几个问题总结(头像裁剪以及跨页面播放音乐)
关于头像裁剪 1.上传图片的裁剪,并没有采用后端裁剪,而采用前端裁剪,基于cropbox进行了修改编码使用一个隐藏的input框存放存放到数据库 2.本来想在后端解析base64编码重新生成文件, ...
html5自动播放音乐外链,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
使用VLC转码，在HTML5页面播放实时监控
首先要获取摄像机品牌的RTSP地址: 如大华的是 rtsp://user:pwd@ip:port/cam/ realmonitor?channel=1&subtype=0 海康的是 rtsp: ...
html5声音播放音乐,HTML5 煽情的音乐播放器和音频可视化
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var minY = 135; //lowest point var maxY = 10; //highes ...
html5中加入音乐怎么弄,如何在H5页面上添加音乐播放
在制作网页的时候,经常会遇到一些带音乐播放的场景,作品的右上角有一个音频按钮,会播放音乐,点击切换播放和暂停.下面就讲一讲如何在h5网页上添加音乐播放. 其实是很简单的,只需要简单几步就可以完成了 1 ...
html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现基于HTML5技术的音乐播放器的设计与实现常志强刘正余杨劲楠皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在我的关注中得到本文献的 ...
html5微信自动播放视频,科技常识：HTML5页面音视频在微信和app下自动播放的实现方法...
今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法的相关 ...
ios html5 audio mp3,H5 audio 微信端在IOS上不能播放音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...

HTML5页面播放音乐

HTML5页面播放音乐相关推荐

最新文章

热门文章