1、网页设计怎么做可以让键盘控制音频开关
建立一个HTML5页面，放置<audio>标签，设置音频文件源，设置循环播放。准备两张图片，分别表示开启和暂停背景音乐两种状态，可以点击。
XML/HTML Code复制内容到剪贴板
<audio id="music2" src="music.mp3" loop="loop">你的浏览器不支持audio标签。</audio>
<a href="javascript:playPause();"><img src="pause.gif" width="48" height="50" id="music_btn2" border="0"></a>
Javascript
在点击开关图片按钮的时候调用了javascript脚本，playPause()函数。函数中判断audio音频播放状态，如果已经停止（paused）则调用.play()继续播放，如果是在播放状态，则立即暂停播放.pause()，两种状态切换时及时更新按钮图片，请看代码：
JavaScript Code复制内容到剪贴板
function playPause() {
var music = document.getElementById('music2');
var music_btn = document.getElementById('music_btn2');
if (music.paused){
music.play();
music_btn.src = 'play.gif';
}
else{
music.pause();
music_btn.src = 'pause.gif';
}
}
如果使用jQuery代码可以这样写：
JavaScript Code复制内容到剪贴板
<audio id="music" src="http://cctv3.qiniudn.com/zuixingfuderen.mp3" autoplay="autoplay" loop="loop">你的浏览器不支持audio标签。</audio>
<a id="audio_btn"><img src="play.gif" width="48" height="50" id="music_btn" border="0"></a>
<script>
$("#audio_btn").click(function(){
var music = document.getElementById("music");
if(music.paused){
music.play();
$("#music_btn").attr("src","play.gif");
}else{
music.pause();
$("#music_btn").attr("src","pause.gif");
}
});
</script>
2、【网页设计】【菜鸟求助】如何播放多个音频
你用格式工厂把音频单独抽出来就行了，多写几个标记就可以多播放几个了。
3、网页制作怎么插入音乐
制作好之后用右键选择记事本打开，找到<body>在下面加一行<bgsound src="你的MP3地址.mp3" autostart=true loop=infinite>
把音乐移动到和你的网页文件同一级目录下面或者子目录下，例如你的网页在 page目录 那么就把音乐放在 page/**.mp3 或者放在 page/images/**mp3，这样方便修改和打包网页文件。
4、用dreamweaver cs6制作网页时，在里面添加音乐，插入－媒体－插件后，添加本地音频文件，
用代码来插入音乐和视频
5、sharepoint 2007版制作网站时怎么插入视频与音频？
学习sharepoint软件前，先学习一下frontpage教程。
1、插入web组件-高级控件-activex控件-windows media player
2、右键调整activex属性
6、PS制作的网页，如何在DW中添加Flash和音频？
很简单啊，Dw中有插入FLASH和背景音乐的按钮，如果你不会html代码的话，就找工具栏上的常用——媒体——swf就可以了；至于背景音乐的话，可以插入代码<bgsound src='" "/>来实现。
7、在制作网页中如何加入播放器
下面是新式播放器代码，相对以前的来说要简单很多：
<object id="player" height="64" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1">
<!--是否自动播放-->
<param NAME="Balance" VALUE="0">
<!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1">
<!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1">
<!--是否启用上下文菜单-->
<param NAME="url" value="/blog/1.wma">
<!--播放的文件地址-->
<param NAME="PlayCount" VALUE="1">
<!--播放次数控制,为整数-->
<param name="rate" value="1">
<!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0">
<!--控件设置:当前位置-->
<param name="currentMarker" value="0">
<!--控件设置:当前标记-->
<param name="defaultFrame" value="">
<!--显示默认框架-->
<param name="invokeURLs" value="0">
<!--脚本命令设置:是否调用URL-->
<param name="baseURL" value="">
<!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0">
<!--是否按比例伸展-->
<param name="volume" value="50">
<!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0">
<!--是否静音-->
<param name="uiMode" value="mini">
<!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示-->
<param name="windowlessVideo" value="0">
<!--如果是0可以允许全屏,否则只能在窗口中查看-->
<param name="fullScreen" value="0">
<!--开始播放是否自动全屏-->
<param name="enableErrorDialogs" value="-1">
<!--是否启用错误提示报告-->
<param name="SAMIStyle" value>
<!--SAMI样式-->
<param name="SAMILang" value>
<!--SAMI语言-->
<param name="SAMIFilename" value>
<!--字幕ID-->
</object>
--------------------------------------------------------------------------------
RealOne播放器代码：
<object id="vid" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=300>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="7938">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="rtsp://211.89.225.1/encoder/cnr3";>
<param name="CONTROLS" value="Imagewindow">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object> <object id="vid2" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width=427 height=30>
<param name="_ExtentX" value="11298">
<param name="_ExtentY" value="794">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="rtsp://211.89.225.1/encoder/cnr3";>
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
--------------------------------------------------------------------------------
看着很多很复杂的样子，其实就是多了些播放器参数，可以不要...
Real Player 网页播放器 参数含义
参数：autostart 属性：True或是False 作用：指定是否自动播放指定的源文件
参数：backgroundcolor 属性：任何用符号“#”开头的16进制数值或是任何预定义的颜色作用：指定图像窗口的背景颜色
参数：center 属性：True或是False 作用：指定片断使用初始编码大小播放，并且在图像窗口的中央。
参数：classid 属性："clsid：CFCDAA03-8BE4-1lcf-B84B0020AFBBCCFA:** 作用：用于指定ActiveX控件的唯一的字符串标示，可以认出嵌入的RealPalyer播放器。
参数：console 属性：任何字符串作用：可以将各种不同的RealPlayer控制聚集在网页上，这样它们可以交互使用或是保持独立，而且互相不影响
参数：controls 属性：ImageWindow，All，ControlPanel，PlavButton，PlayOnlyButton， PauseButton,StopButton，FFCtrl，RWCtrl，MuteCtrl，MuteVolume，VolumeSlider，PositionSlider,TACCtrl，HomeCtrl，InfoVolumePanel，InfoPanel，StatusBar，StatusField，PositionField 作用：可以让你指定那些控制是可见的。
参数：height 属性：任何整数值作用：指定RealPlayer元素的高度，单位:像素
参数：id 属性：任何字符串作用：为标签中的RealPlayer元素指定名字。
参数：imagestatus 属性：True或是False 作用：指定是否在图像窗口中显示状态信息，默认值是true
参数：loop 属性：True或是False 作用：可以让你指定片断是否无限循环
参数：maintainaspect 属性：True或是False 作用：默认RealPlayer拉伸所有的片断来充满整个图像窗口。
参数：name 属性：任何字符串作用：为标签中的RealPlayer元素指定名字(在标签中使用id)
参数：nojava 属性：True或是False 作用：避免启动Java虚拟机
参数：nolabels 属性：True或是False 作用：可以禁止显示标题或是版权信息(realplayer5.0以上时，它是垃圾...)
参数：nologo 属性：True或是False 作用：避免RealPlayer启动时在图像窗口中显示
参数：numloop 属性：任何整数值作用：让你能够指定文件片循环的次数，不需要参数loop
参数：prefetch 属性：True或是False 作用：指定在播放前，RealPlayer是否可以获得流描述信息，默认值是False
参数：region 属性：任何字符串作用：同SMIL一起使用。允许你指定使用HTML代替SMIL
参数：scriptcallbacks 属性：用逗号分割的列表作用：指定浏览器的回调监控（好高级的东东！）
参数：shuffle 属性：True或是False 作用：同多文件片的ram文件或是SMIL文件一起使用。可以让RealPlayer随机播放列表中的文件
参数：src 属性：任何合法的相对或是完整的URL 作用：指定播放的文件或是源文件的地址
参数：type 属性：字符串作用：为嵌入插件指定MIME类型
参数：width 属性：任何整数值作用：指定RealPlayer元素的宽度
RealPlayer的一些函数、方法和过程
这是 Real Player ActiveX Control Library (Version 1.0) 的所有函数与方法，有兴趣可以研究一下。
function GetSource: WideString;
procere SetSource(const lpszNewValue: WideString);
function GetConsole: WideString;
procere SetConsole(const lpszNewValue: WideString);
function GetControls: WideString;
procere SetControls(const lpszNewValue: WideString);
function GetNoLabels: WordBool;
procere SetNoLabels(bNewValue: WordBool);
function GetAutoStart: WordBool;
procere SetAutoStart(bNewValue: WordBool);
function GetAutoGotoURL: WordBool;
procere SetAutoGotoURL(bNewValue: WordBool);
function GetVolume: Smallint;
procere SetVolume(nVol: Smallint);
function GetMute: WordBool;
procere SetMute(bMute: WordBool);
function GetLoop: WordBool;
procere SetLoop(bVal: WordBool);
function GetImageStatus: WordBool;
procere SetImageStatus(bEnable: WordBool);
function GetPacketsTotal: Integer;
function GetPacketsReceived: Integer;
function GetPacketsOutOfOrder: Integer;
function GetPacketsMissing: Integer;
function GetPacketsEarly: Integer;
function GetPacketsLate: Integer;
function GetBandwidthAverage: Integer;
function GetBandwidthCurrent: Integer;
procere DoPlayPause;
procere DoStop;
procere DoNextItem;
procere DoPrevItem;
function CanPlayPause: WordBool;
function CanStop: WordBool;
function HasNextItem: WordBool;
function HasPrevItem: WordBool;
function HasNextEntry: WordBool;
function HasPrevEntry: WordBool;
procere DoNextEntry;
procere DoPrevEntry;
procere AboutBox;
procere EditPreferences;
procere HideShowStatistics;
function IsStatisticsVisible: WordBool;
procere DoGotoURL(const url: WideString; const target: WideString);
procere DoPlay;
procere DoPause;
function GetPosition: Integer;
function GetPlayState: Integer;
function GetLength: Integer;
function GetTitle: WideString;
function GetAuthor: WideString;
function GetCopyright: WideString;
function GetClipWidth: Integer;
function GetClipHeight: Integer;
function CanPlay: WordBool;
function CanPause: WordBool;
procere SetPosition(lPosition: Integer);
function GetNumLoop: Integer;
procere SetNumLoop(lVal: Integer);
function GetCenter: WordBool;
procere SetCenter(bVal: WordBool);
function GetNoLogo: WordBool;
procere SetNoLogo(bVal: WordBool);
function GetMaintainAspect: WordBool;
procere SetMaintainAspect(bVal: WordBool);
function GetBackgroundColor: WideString;
procere SetBackgroundColor(const pVal: WideString);
function GetStereoState: WordBool;
function GetLiveState: WordBool;
function GetShowStatistics: WordBool;
procere SetShowStatistics(bVal: WordBool);
function GetShowPreferences: WordBool;
procere SetShowPreferences(bVal: WordBool);
function GetShowonmouseover WordBool;
procere SetShowAbout(bVal: WordBool);
function GetOriginalSize: WordBool;
procere SetOriginalSize;
function GetDoubleSize: WordBool;
procere SetDoubleSize;
function GetFullScreen: WordBool;
procere SetFullScreen;
function GetEnableContextMenu: WordBool;
procere SetEnableContextMenu(bVal: WordBool);
function GetEnableOriginalSize: WordBool;
procere SetEnableOriginalSize(bVal: WordBool);
function GetEnableDoubleSize: WordBool;
procere SetEnableDoubleSize(bVal: WordBool);
function GetEnableFullScreen: WordBool;
procere SetEnableFullScreen(bVal: WordBool);
function GetEnableMessageBox: WordBool;
procere SetEnableMessageBox(bVal: WordBool);
procere SetTitle(const pVal: WideString);
procere SetAuthor(const pVal: WideString);
procere SetCopyright(const pVal: WideString);
function GetWantKeyboardEvents: WordBool;
procere SetWantKeyboardEvents(bWantsEvents: WordBool);
function GetWantMouseEvents: WordBool;
procere SetWantMouseEvents(bWantsEvents: WordBool);
function GetNumEntries: Smallint;
function GetCurrentEntry: Smallint;
function GetEntryTitle(uEntryIndex: Smallint): WideString;
function GetEntryAuthor(uEntryIndex: Smallint): WideString;
function GetEntryCopyright(uEntryIndex: Smallint): WideString;
function GetEntryAbstract(uEntryIndex: Smallint): WideString;
procere SetCanSeek(bCanSeek: WordBool);
function GetCanSeek: WordBool;
function GetBufferingTimeElapsed: Integer;
function GetBufferingTimeRemaining: Integer;
function GetConnectionBandwidth: Integer;
function GetPreferedLanguageString: WideString;
function GetPreferedLanguageID: Integer;
function GetUserCountryID: Integer;
function GetNumSources: Smallint;
function GetSourceTransport(nSourceNum: Smallint): WideString;
function GetWantErrors: WordBool;
procere SetWantErrors(bVal: WordBool);
function GetShuffle: WordBool;
procere SetShuffle(bVal: WordBool);
function GetVersionInfo: WideString;
function GetLastMessage: WideString;
function GetLastErrorSeverity: Integer;
function GetLastErrorRMACode: Integer;
function GetLastErrorUserCode: Integer;
function GetLastErrorUserString: WideString;
function GetLastErrorMoreInfoURL: WideString;
procere SetPreFetch(bVal: WordBool);
function GetPreFetch: WordBool;
procere SetRegion(const pVal: WideString);
function GetRegion: WideString;
function GetIsPlus: WordBool;
function GetConsoleEvents: WordBool;
procere SetConsoleEvents(bVal: WordBool);
function GetDRMInfo(const pVal: WideString): WideString;
property ControlInterface: IRealAudio read GetControlInterface;
property DefaultInterface: IRealAudio read GetControlInterface;
网页中wmp视频控制之使用指南
//wmplayer.controls.currentPosition = wmplayer.currentMedia.ration * (i / 100)
//
//
//
□播放方法和属性
除播放、暂停、停止外，媒体播放器还可用下面的属性：
扫描(Scanning)——与录像机的快进快倒功能类似；
搜索(Seeking)——直接移到剪辑中标记的特定上演时间；
□播放
媒体播放器提供了两种技术来指定要播放的媒体名称(剪辑)，你可以设置 FileName 属性，或调用 Open 方法。 如果 AutoStart 属性的值是 true 的话，当 FileName 属性被设置成该电影剪辑的 URL 后，该电影剪辑将开始播放；否则电影剪辑不会开始播放， 除非你调用 Play 方法。 Open 方法开始播放是异步的，它不象 Play 方法要等到其他的进程结束后才开始播放。
媒体播放器提供了下面的类似录像机的属性和方法来控制流媒体的播放：
Play、Stop、Pause 方法，来开始、停止、暂停流媒体。
PlayCount 属性，设置文件播放的次数。
AutoRewind 属性，确定当停止播放时是否返回到电影剪辑的开始部分。
□音频控制
媒体播放器提供了下面的属性来管理音频：
Balance 属性，确定左右音箱的声音平衡；
Volume 属性，用来加大或降低音量；
Mute 属性，用来关闭或打开声音；
※你可以将 ShowAudioControls 属性设为 true 来在控制栏添加处理声音的控件。
□扫描
媒体播放器提供了下面的属性用以扫描：
FastForward 方法，快进；
FastReverse 方法，快倒；
Rate属性，改变播放速率；
※要想使电影剪辑能被扫描，必须将 CanScan 和 AllowScan 属性设为 true。
□搜索
用于搜索的属性有：
MarkerCount 属性，指剪辑中标记的总数量；
CurrentMaker、GetMarkerName、GetMarkerTime 方法，用于返回标记信息；
MarkerHit 事件，当遇到标记时触发；
CurrentPosition 属性，当前位置(用秒度量)，可用来将播放头移到剪辑中指定的点；
PositionChange 事件，当设置 CurrentPosition 属性时触发；
※要想搜索到任意的时间，必须将 CanSeek 属性设为 true，要想搜索到标记点，必须将 CanSeekToMarkers 属性设为 true。
□媒体播放器的外观界面
在网页中，你可以通过相关属性来控制媒体播放器的哪些部分出现，哪些部分不出现。
媒体播放器包括如下元素：
Video Display Panel：视频显示面板；
Video Border：视频边框；
Closed Captioning Display Panel；字幕显示面板；
Track Bar；搜索栏；
Control Bar with Audio and Position Controls：带有声音和位置控制的控制栏；
Go To Bar：转到栏；
Display Panel：显示面板；
Status Bar：状态栏；
下面的属性用来决定显示哪一个元素：
ShowControls 属性：是否显示控制栏（包括播放控件及可选的声音和位置控件）；
ShowAudioControls 属性：是否在控制栏显示声音控件（静音按钮和音量滑块）；
ShowPositionControls 属性：是否在控制栏显示位置控件（包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑）；
ShowTracker 属性：是否显示搜索栏；
ShowDisplay 属性：是否显示显示面板（用来提供节目与剪辑的信息）；
ShowCaptioning 属性：是否显示字幕显示面板；
ShowGotoBar 属性：是否显示转到栏；
ShowStatusBar 属性：是否显示状态栏；
□播放列表
媒体播放器提供下面的方法来访问播放列表中的剪辑：
Next 方法，跳到节目（播放列表）中的下一个剪辑；
Previous 方法，跳回到节目中的上一个剪辑；
媒体播放器的一个特性是能够预览节目中的每一个剪辑，使用如下属性：
PreviewMode 属性，决定媒体播放器当前是否处于预览模式；
CanPreview 属性，决定媒体播放器能否处于预览模式；
在windows 媒体元文件中，可以为每一个剪辑指定预览时间——PREVIEWDURATION,如果没有指定，那么默认的预览时间是10秒钟。
你也可以用Windows 媒体元文件来添加 watermarks 与 banners，元文件也支持插入广告时的无间隙流切换。
□节目信息
使用 GetMediaInfoString 方法可以返回相关剪辑或节目的如下信息：
文件名：File name
标题：Title
描述：Description
作者：Author
版权：Copyright
级别：Rating
URLs：logo icon、watermark、banner的地址
剪辑信息可以放在媒体文件中，也可以放在Windows 媒体元文件中，或者两者都放。
剪辑信息可以放在媒体文件中，也可以放在windows 媒体元文件中，或者两者都放。如果在元文件中指定了剪辑信息，那么用 GetMediaInfoString 方法返回的就是元文件中的信息，而不会返回剪辑中包含的信息。
在元文件中，附加信息可以放置在每一个剪辑或节目的 PARAM标签中。你可以为每个剪辑添加任意多个 PARAM 标签，用来存储自定义的信息或链接到相关站点。在 PARAM 标签中的信息可以通过 GetMediaParameter 方法来访问。
下面的属性返回有关大小和时间的信息：
ImageSourceHeight、ImageSourceWidth：返回图像窗口的显示尺寸；
Duration 属性，返回剪辑的长度(秒)， 要检测这个属性是否包含有效的数值，请检查IsDurationValid 属性。(对于广播的视频，其长度是不可预知的)。
□字幕
你可以用 .smi 文件来为你的节目添加字幕。媒体播放器支持下面的属性来处理字幕：
SAMIFileName 属性，指定 .smi 文件的名字；
SAMILang 属性，指定字幕的语言(如果没有指定则使用第一种语言)；
SAMIStyle 属性，指定字幕的文字大小和样式；
ShowCaptioning 属性，决定是否显示字幕显示面板；
□脚本命令
伴随音频、视频流，你可以在流媒体文件中加入脚本命令。脚本命令是多媒体流中与特定时间同步的多对Unicode串。第一个串标识待发命令的类型，第二个串指定要执行的命令。
当流播放到与脚本相关的时间时，控件会向网页发送一个 scriptCommand事件，然后由事件处理进程来响应这个事件。脚本命令字符串会作为脚本命令事件的参数传递给事件处理器。
媒体播放器会自动处理下面类型的内嵌脚本命令：
1)URL型命令：当媒体播放器控件收到一个URL型的命令时，指定的URL会被装载到用户的默认浏览器。如果媒体播放器嵌在一个分帧的HTML文件中，URL页可以装载到由脚本命令指定的帧内。如果脚本命令没有指定一个帧，将由 DefaultFrame 属性决定将 URL 页装入哪一帧。
你可以通过设置 InvokeURLs 属性来决定是否自动处理 URL 型的脚本命令。如果这个属性的值为 false ，媒体播放器控件将忽视 URL型命令。但是脚本命令事件仍会触发，这就允许你有选择地处理 URL 型命令。
URL 型命令指定的是 URL 的相对地址。基地址是由 BaseURL属性指定的。媒体播放器控件传送的脚本命令事件的命令参数是链接好的地址。
2)FILENAME型命令：当媒体播放器控件收到一个FILENAME型的命令时，它将 FileName属性设置为脚本命令提供的文件，之后媒体播放器会打开这个文件开始播放。 媒体播放器控件总是自动处理 FILENAME 型命令，不象 URL 型命令，它们不能被禁止。
3)TEXT型命令：当媒体播放器控件收到一个 TEXT型的命令时，它会将命令的内容显示在控件的字幕窗口。内容可以是纯文本的，也可以是 HTML。
4)EVENT型命令：当媒体播放器控件收到一个 EVENT型的命令时，它会在媒体元文件中搜索 EVENT 元素的 NAME 属性。如果 NAME 属性与脚本命令中的第二个字符串匹配，媒体播放器控件就执行包含在 EVENT 元素中的条目。
5)OPENEVENT型命令：当媒体播放器控件收到一个 OPENEVENT型的命令时，它会在媒体元文件中检查 EVENT 元素，并打开匹配的标题，但不播放，直到收到来自 EVENT型命令的同名真实事件。
□捕捉键盘和鼠标事件
EnableContextMenu 与 ClickToPlay 属性为用户提供了在图像窗口进行操作的方法。
如果 EnableContextMenu 属性为 true ，在图像窗口右击鼠标可以打开关联菜单，如果将ClickToPlay 属性设为 true ，用户可以单击图像窗口进行播放与暂停的切换。
要接收鼠标移动和单击事件，请将 SendMouseMoveEvents 和 SendMouseClickEvents 属性设为 true 。鼠标事件有：
MouseDown，当用户按下鼠标时产生；
MouseUp，当用户释放鼠标时产生；
MouseMove，当用户移动鼠标时产生；
Click，当用户在媒体播放器上单击鼠标按钮时产生；
DbClick，当用户在媒体播放器上双击鼠标按钮时产生；
要接收键盘事件，请将 SendKeyboardEvents 属性设为 true 。键盘事件有：
KeyDown，当用户按下一个键时产生；
KeyUp，当用户释放一个键时产生；
KeyPress，当用户按下并释放
8、网页制作 怎么让插入的音频文件不自动播放？
embed里面加个属性 autostart="false" 就不自动播放了
9、请问知道如何在网页制作中插入音频文件吗
不是的。一般使用一个相对地址。
例如要在index.html文件中插入音乐文件，那你可以将音乐文件放在index.html所在文件夹下的music文件夹下，那么你的音乐文件相对地址就应该是 music/音乐文件名称
如果你直接将音乐文件放到index.html所在的文件夹，那么地址可以直接用音乐文件名称
当然也可以将音乐文件放在index.html文件的上级目录中（比如新建一个music文件夹），相对地址就应该用 ../music/音乐文件名称
希望对你有帮助。