1、1 首先第一步根据下图所示，先准备需要播放的MP3音乐，接着创建并打开html文件2 第二步打开文件后，根据下图所示，添加相关标签3 第三步根据下图所示，输入代码audio id =audio src = XXXXmp3 controls = con。

2、mp3quotltaudio3浏览器运行indexhtml页面，此时一进入页面就自动播放了背景音乐。

3、播放列表下方有两个选项，Shuffle和Clear，你可以用来对播放列表重新排序，或是清空播放列表 神奇的是，你还可以直接Ctrl＋S苹果机用cmd＋s快捷键将这个网页保存到桌面上，今后就可以在离线模式下工作，就像一个真正的。

4、由于浏览器的安全策略问题，现在已经不再支持打开页面自动播放音乐了，如需要播放还是要让用户点击播放才可以，可以使用html5的audio标签加载音乐播放ltaudio src=quot。

5、运行页面，就可以看到一个mp3的播放器了04 点击播放器的播放按钮后，网页就可以播放mp3音乐了，非常简单。

6、ltbody ltbgsound src=quot你要播放的音乐urlquot ltbody 2 广泛兼各种浏览器的方法 ltembed src=quot背景音乐的路径quot loop=“是否循环播放”ltembed 3插入一个flash播放器，然后播放相应的音乐个人不推荐这种方法。

7、lt！ 上面是加入js部分的 ltaudio src=quotclickmp3quot controls=quotcontrolsquot preload id=quotmusicquot hidden ltaudio ltbutton id=quotaquot onclick=quotaquot播放暂停ltbutton。

8、可以用HTML5的audio标签实现音乐播放HTML5里面新增的有个audio标签，可以不需要Flash插件就可以在网页上播放媒体文件，目前只支持MP3，ogg，wav三种格式的音频文件IE9支持MP3 FirefoxOpera 支持ogg，wav Chrome 支持 ogg。

9、设置音乐播放控制面板的外观，“console”为通常面板“smallconsole”为小型面板“playbutton”为是否显示播放按钮“pausebutton”为是否显示暂停按钮“stopbutton”为是否显示停止按钮“volumelever”为是否显示 音量调节。

10、HTML代码中插入音乐播放器，大致有四种风格，代码如下白色普通播放器代码ltEMBED height=45 type=audiompeg width=300 src=音乐地址 volume=quot0quot loop=quot1quotltEMBED 黑色播放器代码ltEMBED style=quotFILTER Xrayquot。

11、使用HTML5的audio标签可以实现你想的那样示例 lt！DOCTYPE htmllthtmlltbody ltaudio controls ltsource src=quothorseoggquot type=quotaudiooggquot ltsource src=quothorsemp3quot type=quotaudiompegquotYour browser does not。

12、1src=quotmusicmidquot 指的是背景音乐的路径，最好能使用相对路径，以便上传的时候不会出错这里的musicmid跟网页文件在同一个目录下，所以直接输入文件名即可2autostart=quottruequot 指的是当音乐文件载入后是否自动播放。

13、1新建一个记事本，打开，粘贴基本的代码2lthtmlltheadlttitle这里填写标题lttitleltmeta name=quotkeywordsquot content=quot这里填写关键词quot ltmeta name=quotdescriptionquot content=quot这里填写说明内容quot ltstyletype=quottext。

14、上代码 lt！doctype htmllthtmlltheadltmeta charset=quotutf8quotlttitlelttitleltheadltbodyltaudio id=quotplayerquot ltsource src=quot092 AC DC You Shook Me All Night Longmp3quotltsource ltaudio。

15、分别放多个音乐资源，然后每张图片绑定一个按下鼠标事件，就是播放音乐，松开鼠标即停止，主要判断点击不同图片的时候做个判断，播放对应的音乐就可以了。