您的位置：首页 > Web前端 > HTML

HTML初体验——实现在不同页面下对背景音乐的控制

2013-08-23 15:29 441 查看

这是之前曾在知乎上提出的一个问题，后来经过查阅资料，自己给出了这样一个简单的方案贴了上去，现在再次把它拿过来放在这里，是为了和大家交流一下。因为我觉得这样实现有些繁琐，希望能一起交流，给出更好的解答。

以下是整个实现的源代码，我把介绍也放在了里面：

图示：

frame.html:

<html>
<head>
<meta charset="utf-8" />
</head>

<frameset rows="10%,90%" framespacing="0" frameborder="no" border="0">
<frame name="button" src="control.html">
<frame name="vbody" src="demo.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
</html>
demo.html(内含有关介绍):

<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet" href="style.css" />
</head>

<body class="body">
<h3>Demo</h3>
<p></p>
<a href="link1.html">Link1</a>
<a href="link2.html">Link2</a>
<a href="link3.html">Link3</a>
<p><em>主要实现的功能是：</em><br />
1、链接到不同页面时，不影响背景音乐的播放<br />
2、可在不同的页面实现对背景音乐的控制<br /><br />
<em>实现方法：</em><strong>解决问题1：</strong>通过使用框架<frame>标签，定义 frameset 中的一个特定的窗口（框架）。<br />
例：实现一两框架页面(此页面显示的是垂直的两列框架)<p></p>
<pre>
<frameset cols="50%,50%">
<frame src="a.html" />
<frame src="b.html" />
</frameset>
</pre>
</p>
<p>
同样的，可以实现水平框架和混合框架结构。<br />
运用以上原理，我通过把两个页面“controBtn.html”和“demo.html”放在框架内，按顺序设置参数rows="10%,90%",至此，问题1解决。<br />
<strong>解决问题2：</strong>首先，我没有运用常见的添加背景音乐方法(运用<basound />和<embed></embed>)，而是直接使用了标签<audio>来实现，<br />
只不过，为了达到背景音乐所谓的“背景”,我只是没有添加controls属性，同时设置autoplay="true"而已，这算不算是一个投机取巧的办法>_< <br />
添加音乐代码：<audio id="myMusic" src="音乐地址" autoplay="true" loop="true"></audio><br />
接下来就是实现对音乐的控制，通过添加两个按钮（背景可以自定义），设置值分别为play和pause。<br />
添加按钮代码：<input type="button" onclick="play()" value="play" />和<input type="button" onclick="pause()" value="pause" /><br />
然后是获取音乐的id，实现点击按钮的play()和pause()方法。我把它放在了"musicCtr.js"中，通过在“control.html”中实现链接，至此，问题2解决。<br />
</p>
</body>
</html>

control.html:
<html>
<head>
<script src="musicCtr.js"></script>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
</head>

<body>
<input id="play" type="button" onclick="play()" value="play" />
<input id="pause" type="button" onclick="pause()" value="pause" />
<audio id="myMusic" src="水木年华 - 轻舞飞扬.mp3" autoplay="true" loop="true"></audio>
</body>
</html>
link1.html（添加三个链接页面，link1.html，link2.html，link3.html，这里我只贴一个，另外两个是一样的）:

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Link1</title>
</head>

<body>
<h3>Link1</h3>
<p></p>
<a href="demo.html">Home</a>
</body>
</html>

musicCtr.js:
function play() {

var music = document.getElementById('myMusic');
music.play();
}

function pause() {

var music = document.getElementById('myMusic');
music.pause();
}

style.css:
* {
margin:0;
padding:0;
}
.body {
width:800px;
height:800px;
margin:auto;
font-family:Verdanad;
}
h3 {
text-align:center;
margin-top:10px;
}
p {
margin-left:20px;
margin-top:20px;
line-height:1.6em;
}
a {
text-decoration:none;
padding:10px;
margin-left:20px;
margin-top:20px;
}
input {
margin-top:20px;
width:60px;
height:30px;
color:white;
background:#ccc;
border-radius:5px;
}
#play {
margin-left:300px;
margin-right:10px;
}

可以自己实现一下看看效果，期待交流！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html 框架

相关文章推荐

新的分享

章节导航