在写一个大学生实训用的网站时，遇到一个问题。
具体经过是这样的，我想要实现网页显示在不同的div时，播放不同的背景音乐。但是每次都发现只会播放第一个div的音乐。
主要代码如下：
var sound1="music/page1.mp3";
var sound2="music/page2.mp3";
var sound3="music/page3.mp3";
var sound4="music/page4.mp3";
var sound5="music/page5.mp3";
var sound6="music/page6.mp3";
var sound7="music/page7.mp3";
var soundx="music/text.mp3";//各个div音乐的路径写出来
var x;
if(index==1){
x=sound1; //在第一页时播放sound1
}else if(index==2){
x=sound2; //在第二页时播放sound2
}else if(index==3){
x=sound3;
}else if(index==4){
x=sound4;
}else if(index==5){
x=sound5;
}else if(index==6){
x=sound6;
}else if(index==7){
x=sound7;
}else{
x=soundx; //测试什么时候出错的时候，播放text音乐
}
//写embed标签,播放背景音乐
document.write('<embed src='+'"'+x+'"'+'hidden="true" autostart="true" loop="true">');
大概解释一下，index代表当前屏幕所在的“页”，总共有7页，也就是div1-div7，我实现了鼠标往下滑，整个网页就刚好往下滑一个屏幕大小的区域，然后屏幕上显示的div1变到div2，index+1，再往下滑，屏幕上显示的div2变到div3......,index+1，这些功能我都测试过是没有问题的。
那么现在问题来了，为什么我的网页还是可以从div1滑到其他div，但是背景音乐始终放的是sound1，我试过给index初始值为2，然后背景音乐就变成sound2，设为3变成sound3......既然如此我觉得问题还是在document.write上，是不是document.write在整个html文档里只可以执行一次呢？或者我哪里做的不对，恳请各位大哥帮忙看一下，以解大学生当下之急。
在不同的div里播放不同的音乐 可以采取以下方案，亲测有效。本人操作时，采用一个屏幕为一个div，鼠标滑动一次就会滑到下一个div，然后每一个div里都播放不同的音乐。感兴趣的可以试试，以下为关键代码，想要全部可以留言
var e = document.createElement("embed");
function bgmusic(){
if(index==1){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page1.appendChild(e);
// e.innerHTML = "";
// document.write('');
}else if(index==2){
e.src="music/page2.mp3";
e.width="0";
e.height="0";
e.autostart="true";
e.loop="true";
var object = page2.appendChild(e);
}else if(index==3){
e.src="music/page3.mp3";
e.hidden="true";
e.autostart="true";
var object = page3.appendChild(e);
}else if(index==4){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page4.appendChild(e);
}else if(index==5){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page5.appendChild(e);
}else if(index==6){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page6.appendChild(e);
}else if(index==7){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page7.appendChild(e);
}else if(index==8){
e.src="music/page.mp3";
e.hidden="true";
e.autostart="true";
var object = page8.appendChild(e);
}else{
e.src="music/text.mp3";
e.hidden="true";
e.autostart="true";
var object = main.appendChild(e);
}
}
document.write在整个html文档里只可以执行一次呢？答案是：不是的，你可以任意调用多次。
分析了下你之所以感觉只会调用一次，可能是你只是触发了一次这个操作而已。
你的问题不在于document.write()是不是在文档里面只能执行一次. 而是,你的index发生改变的时候,不会去触发这个document.write()事件,
把document.write()写入你的触发index改变事件函数里面,就可以达到你想要的的效果.
但是, document.write()在页面加载完毕之后调用,会重写整个页面,就是你的body可能直接被document.write()要写入的内容给覆盖.
所以你可以选择用其他的方法来插入这个标签. 希望这个会有帮助,贴一段示例代码吧.
<input type="button" value="index" id="btn">
<script>
var index = 0
var sound1 = "music/page1.mp3";
var sound2 = "music/page2.mp3";
var sound3 = "music/page3.mp3";
var sound4 = "music/page4.mp3";
var sound5 = "music/page5.mp3";
var sound6 = "music/page6.mp3";
var sound7 = "music/page7.mp3";
var soundx = "music/text.mp3";//各个div音乐的路径写出来
var x;
document.getElementById('btn').onclick = function () {
if (index < 9) {
index++
} else {
index = 0
}
if (index == 1) {
x = sound1; //在第一页时播放sound1
} else if (index == 2) {
x = sound2; //在第二页时播放sound2
} else if (index == 3) {
x = sound3;
} else if (index == 4) {
x = sound4;
} else if (index == 5) {
x = sound5;
} else if (index == 6) {
x = sound6;
} else if (index == 7) {
x = sound7;
} else {
x = soundx; //测试什么时候出错的时候，播放text音乐
}
console.log(index)
//写embed标签,播放背景音乐
document.write('<embed src=' + '"' + x + '"' + 'hidden="true" autostart="true" loop="true">');
}
</script>