设计MP3网页音乐播放器

本例设计一个网页音乐播放器，浏览效果如下图所示。
设计原理：获取要播放的文件路径，然后把它传递给audio元素的 src 属性，再调用HTML5多媒体API中相关属性、方法或事件，根据各种逻辑设计来控制播放、暂停和停止状态。

设计过程：
第1步，新建HTML5文档，设计播放器页面结构。网页音乐播放器的主体结构为上、中、下结构，顶部分布了多个播放按钮，中部为音乐列表，底部为播放模式切换按钮。

00:00 / 00:00

重置列表 随机打乱 清空列表

播放模式： 全部

第2步，在界面中插入一个<audio id.“masicbox”>标签，在main css样式表中隐藏音频文件.
var musicFiles = [{
name: “感恩的心 “,
author: “欧阳菲菲”,
url: “music/感恩的心.mp3”
},
{
name: “北京北京”,
author: “梁博”,
url: “music/北京北京.mp3”
},
{
name: “离不开你”,
author: “朱克”,
url: “music/离不开你.mp3”
},
{
name: “最后一页”,
author: “江语晨”,
url: “music/最后一页.mp3”
},];
$(function() {
var $media = $(”#musicbox”);
var musicIndex = -1; //当前正在播放的歌曲的索引
var playingFile = null; //当前正在播放的歌曲
var playMode = 1; //播放模式
init = function() {
for (var a in musicFiles) {
$("#musiclist").append("

• " + musicFiles[a].name + " - " + musicFiles[a].author + “
• ”);
  }
  nextMusic();
  } ();
  $("#next").bind(“click”, nextMusic);
  // $(“audio”).bind(“error”, nextMusic);
  function nextMusic() {
  if (playMode == 1) {
  musicIndex += 1;
  }
  if (musicIndex == musicFiles.length) {
  musicIndex = 0;
  }
  playMusic(musicIndex);
  }
  // 播放