给自己的html5加上背景音乐,网页加背景音乐用JS控制播放 HTML5 - audio
制作一个游戏网站首页,要求加入背景音乐
上面一行解决了, autoplay="autoplay"表示自动播放, loop="loop"循环播放。
下面继续改造,要控制暂停和播放。加入一个按钮,点击按钮停止播放背景音乐,再次点击继续背景音乐。
要实现就要用到JS,用到播放和.play()和暂停.pause()。
function autoPlay() {
var myAuto = document.getElementById("music2");
myAuto.play();
}
function closePlay() {
var myAuto = document.getElementById("music2");
myAuto.pause();
}
按钮用图标显示2种状态,CSS如下:
body {background-color:#b0c4de;}
.music.pause {
background-position: -65px 0;
}
.music {
display: block;
width: 32px;
height: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAADNgkbwAAAAKHRSTlMAh/zha1rxs01ILQPRzAumlYwZ88V4H+PXMLl7QDwSDwbnrJqZXuVdVszD3QAAAZhJREFUSMe9leuOgkAMhcdBRa4iqIj3dW99/yfcAzHZHTu2Yzbh/Pwo3wSmac0/k+RFsTBjJJmTnZoxkkZEVWZGSF0QxWVg8YZ8mZuglDeivA5TVN6q3IQlWxG1yyBF7K2KTWimlmyQIvdWVS81X5ACZfbqkAOqNq80X/9Fpaa4AH256ANoJqq5As2nKFKgtYv2QCdRzRRIUcuKBdDSRTugrajmCrzTdqJiCrRyUUNkM9nNFWi+eSIpJqhyB9YZJNLkXDFMPkGxBHNncMdujcWrSFt8WPZUsQbrlFvj4Qpn8vkUEdiZ/fKJ0cMVZdw3n1+RWaLGRSt2ayxc8Tv5otSr2ALt5FvjERRD8/kUJ6A9/+WpqJYUSYPm8yhmQO8uaoEuolpUdHi/4YoN0MEhV6uuPVlR58/W3if75fLa0xTlfrg1vvaODjmqay9I0fy5I+rjTL9J6NrTFWi+xyp7ZVXq2tMVFs33UPVmWNW3UaIrDsPkc6oiVhWyX1VF33y3coSD7pNvhINMVuFJOsJB98k3xkFmURR58gOCIXCeYbAOYAAAAABJRU5ErkJggg==);
position: absolute;
top: 20px;
right: 20px;
background-position: 0 0;transition: all 2s;transform: rotate(360deg);
}
小图片转码为base64,
接着下来用JS切换按钮状态并控制播放与暂停。
function changeImage()
{
if (document.getElementById("mus").className == "music")
{
document.getElementById("mus").className = "music pause";
closePlay();
}
else
{
document.getElementById("mus").className = "music";
autoPlay();
}
}
将播放/暂停按钮位置固定在网页的右上
放入网页打开试了一下,就是感觉没有动态效果,以后加点动态效果,之前网上好像有一段代码背景音乐带一个旋转图标的,有兴趣可以找一下。
下面是完整代码:
body {background-color:#b0c4de;}
.music.pause {
background-position: -65px 0;
}
.music {
display: block;
width: 32px;
height: 30px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAAgCAMAAADJyc2SAAAAe1BMVEUAAADNgkbwAAAAKHRSTlMAh/zha1rxs01ILQPRzAumlYwZ88V4H+PXMLl7QDwSDwbnrJqZXuVdVszD3QAAAZhJREFUSMe9leuOgkAMhcdBRa4iqIj3dW99/yfcAzHZHTu2Yzbh/Pwo3wSmac0/k+RFsTBjJJmTnZoxkkZEVWZGSF0QxWVg8YZ8mZuglDeivA5TVN6q3IQlWxG1yyBF7K2KTWimlmyQIvdWVS81X5ACZfbqkAOqNq80X/9Fpaa4AH256ANoJqq5As2nKFKgtYv2QCdRzRRIUcuKBdDSRTugrajmCrzTdqJiCrRyUUNkM9nNFWi+eSIpJqhyB9YZJNLkXDFMPkGxBHNncMdujcWrSFt8WPZUsQbrlFvj4Qpn8vkUEdiZ/fKJ0cMVZdw3n1+RWaLGRSt2ayxc8Tv5otSr2ALt5FvjERRD8/kUJ6A9/+WpqJYUSYPm8yhmQO8uaoEuolpUdHi/4YoN0MEhV6uuPVlR58/W3if75fLa0xTlfrg1vvaODjmqay9I0fy5I+rjTL9J6NrTFWi+xyp7ZVXq2tMVFs33UPVmWNW3UaIrDsPkc6oiVhWyX1VF33y3coSD7pNvhINMVuFJOsJB98k3xkFmURR58gOCIXCeYbAOYAAAAABJRU5ErkJggg==);
position: absolute;
top: 20px;
right: 20px;
background-position: 0 0;transition: all 2s;transform: rotate(360deg);
}
function autoPlay() {
var myAuto = document.getElementById("music2");
myAuto.play(); // 好文本网 www.goodtext.cn
}
function closePlay() {
var myAuto = document.getElementById("music2");
myAuto.pause();
}
//www.goodtext.org
function changeImage()
{
if (document.getElementById("mus").className == "music")
{
document.getElementById("mus").className = "music pause";
closePlay(); // 好文本网 www.goodtext.cn
}
else
{
document.getElementById("mus").className = "music";
autoPlay(); // 好文本网 www.goodtext.cn
}
}
用几款浏览器测了下,Chrome浏览器通过输入网址进入好像不能自动开始播放,不知道是防火墙的问题还是什么权限问题,从一个站的其他页点过去就能正常自动播放过。
为了Chrome浏览器能自动播放,加一段判断刷新应急,代码如下:
setTimeout(function (){
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if (isChrome) {
if(location.href.indexOf("#reloaded")==-1){
location.href=location.href+"#reloaded";
location.reload();
}
//www.goodtext.org
} else {
//www.goodtext.org
}
}, 6000);
首先等待6秒判断是否为Chrome浏览器,如果是就刷新一次。不过感觉这么做有点傻,有知道原因和解决办法的高手请指教一下吧,谢谢~!
本站内容仅供参考,不保证正确性,如使用本站内容出现任何问题本网站均得免责。
本站原创,欢迎转载,转载请注明出处。
· END ·
TAG:网页加背景音乐,JS控制播放,HTML5,audio 来源:网络
给自己的html5加上背景音乐,网页加背景音乐用JS控制播放 HTML5 - audio相关推荐
- 【背景音乐】网易云外部链接给网页加背景音乐
怎么使用网易云外部链接给网页加背景音乐 今天我们来优化一下自己的网站.添加背景音乐,首先搜索了网易云的一首歌. 点击生成外部链接那个链接,打开到这. 复制这段代码到你的html后你会发现好像没效果.完 ...
- Android开发笔记(六十四)网页加载与JS调用
内置浏览器 网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法.WebView就是A ...
- 苹果微信html音乐播放,HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程 在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
- php怎么加背景音乐,录音加背景音乐要怎么做 如何将两个音乐融合
点击下载安装软件,安装后打开软件,点击"文件-打开"将两个音频文件添加到软件,这里其实可以直接将音频拖到软件界面的 点击"打开"后就直接选中要操作的两个音频文件 ...
- html5 audio js控制进度,HTML5 audio标签使用js进行播放控制实例
标签可以在html5浏览器中播放音频文件. 默认提供一个控制面板,但是有些时候我们只需要播放声音,控制面板由我们自己来定义其显示的状态. 这里我们可以使用js来进行控制,代码如下: 复制代码代码如下: ...
- java网页背景音乐_h5网页加背景音乐
图标: html插入mp3代码: 上面的代码在浏览器是不显示的,因此,我们给个div放播放的图标: 图标的相关css代码: #musicbutton { width: 30px; height: 30 ...
- html5 audio js控制进度,HTML5多媒体的之audio和video。JavaScript控制进度条播放进度
使用HTML5多媒体,audio和video两个元素可以让用户不必借助flash player插件即可播放音频和视频. 小知识:视频文件包含了音频轨道,视频轨道和其他一些元数据.当我们播放视频的时候, ...
- audio插入背景音乐_HTML5添加背景音乐 3种方法个人推荐audio
这里推荐两种方法,就是两个标签 或者 常用 +css布局 隐藏播放器 做网站比较实用! html5添加音乐 说明: 1.src毫无疑问写路径. 2.使用hidden="true" ...
- 【Canvas】HTML5游戏开发的基本流程+P2.js物理引擎实战开发
<HTML5游戏开发的基本流程> * 1. HTML5的简述 * 2. HTML5游戏开发所需的环境与工具 * 2.1. 开发环境 * 2.1.1. 浏览器 * 2.1.2. 开发语言 * ...
最新文章
- swift使用xib绘制UIView
- Cocos2d-x 3.8.1+Cocos Studio 2.3.2捉虫记之控制场景文件中的骨骼动画
- MCSE2003学习之六
- HDU4389(数位DP)
- 3.顶点外扩方法实现的描边shader
- 一文说通Dotnet的委托
- 程序员减压方法100%有效
- C++多态的练习——编写一个计算器项目
- ubuntu之路——day9.2 Covariate shift问题和Batch Norm的解决方案
- 小米4 第三方re奇兔_小米手机刷机教程整合版
- 软件测试功底技术——编程语言
- c语言入门篇:程序调试方法
- 基于51单片机的电子罗盘数字指南针HCM8553原理图程序设计
- QQ、淘宝、阿里旺旺在线网页链接代码及详解 很实用
- U盘弹出问题解决尝试和记录
- Dota2 比赛匹配
- 网页源文件星号怎么显示_怎么查看网页星号密码?4种浏览器网页星号点号密码查看方法介绍...
- 如何用html写抖动效果,利用transition实现文字上下抖动的效果
- 项目生命周期、开发生命周期与产品生命周期的区别
- java中pl是什么意思,英语中pl是什么意思