最近项目中用到音频播放，就写了一个demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JPlayer/jquery.min.js" type="text/javascript"></script>
<script src="JPlayer/jquery.jplayer.min.js" type="text/javascript"></script>
<link href="Css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//歌曲绑定
var songList = new Array();
songList.push("/Audio/飘洋过海来看你.mp3");
songList.push("/Audio/广岛之恋.mp3");
songList.push("/Audio/贝加尔湖畔.mp3");
var songId = 0;
$(document).ready(function () {
//播放初始化
$('#jp_sound').jPlayer({
ready: function () {
$(this).jPlayer('setMedia', { mp3: songList[0] });
},
supplied: 'mp3',
swfPath: '/JPlayer',
wmode: 'window',
autoBlur: false,
smoothPlayBar: true,
solution: 'flash, html',
preload: 'auto',
ended: function () {//结束事件
if (document.getElementById('CircleAudio').checked)
$('#jp_sound').jPlayer('play');
else {
NextSong();
}
},
volume: 0.5,
timeupdate: function (event) {//时间更改事件
$("#time").html(" " + $.jPlayer.convertTime(event.jPlayer.status.currentTime) + "/" + $.jPlayer.convertTime(event.jPlayer.status.duration));
$("#currentProgress").css("width", event.jPlayer.status.currentPercentRelative + "%");
}
});
})
var isPlay = false;
//播放
function Play() {
$('#jp_sound').jPlayer('play');
isPlay = true;
}
//停止
function Stop() {
$('#jp_sound').jPlayer('stop');
$("#time").html(" 00:00/00:00");
isPlay = false;
}
//暂停
function Pause() {
$('#jp_sound').jPlayer('pause');
}
//静音
function StopAudio() {
$('#jp_sound').jPlayer('mute');
}
//恢复音量
function RecoverAudio() {
$('#jp_sound').jPlayer('unmute');
}
//选择某个进度播放
function SetProgress(event) {
if (isPlay == true) {
var precent = event.clientX / 194;
$("#jp_sound").jPlayer("playHead", precent * 100);
$('#jp_sound').jPlayer('play');
}
}
//是否循环播放
function CircleAudio() {
if (document.getElementById('CircleAudio').checked) {
if (isPlay == true)
$('#jp_sound').jPlayer('play');
}
}
//上一首
function PreSong() {
if(isPlay == true)
{
songId--;
if(songId<0) {
songId = songList.length - 1;
}
PlaySong(songId);
}
}
//下一首
function NextSong() {
if (isPlay == true) {
songId++;
if(songId>=songList.length) {
songId = 0;
}
PlaySong(songId);
}
}
//播放某一首歌曲
function PlaySong(id) {
if (id == 0) {
$('#jp_sound').jPlayer('setMedia', { mp3: songList[0] });
}
else if (id == 1) {
$('#jp_sound').jPlayer('setMedia', { mp3: songList[1] });
}
else if (id == 2) {
$('#jp_sound').jPlayer('setMedia', { mp3: songList[2] });
}
$('#jp_sound').jPlayer('play');
}
</script>
</head>
<body>
<div id="jp_sound"></div>
<div>
<button onclick="Play()">播放</button>
<button onclick="Pause()">暂停</button>
<button onclick="Stop()">停止</button>
<button onclick="StopAudio()">静音</button>
<button onclick="RecoverAudio()">恢复音量</button>
<button onclick="PreSong()">上一首</button>
<button onclick="NextSong()">下一首</button>
<input id="CircleAudio" type="checkbox" checked="checked" onclick="CircleAudio()"/>单曲循环
</div>
<div class="jp-Progress">
<div class="jp-seek-bar" id="widthPro" onmousedown="SetProgress(event)" style="width: 100%;background-color: #F9F6B6;">
<div style="width: 0%; background-color: #808000; height: 15px;"
id="currentProgress"></div>
</div>
</div>
<div>
<label id="time" style="font-family: 微软雅黑; font-weight: bold;"> 00:00/00:00</label>
</div>
</body>
</html>
完整代码，去我的CSDN里面下载：
时间： 2024-11-03 05:31:08