如何用js控制audio元素连续播放mp3文件
展开全部
1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。
2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。
3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自动播放，如下图所示。
4、还有一个loop属性，是用来控制音频文件是否循环播放的，如下图所示。
5、接下来，preload属性是用来告诉音频文件是否预加载的，加上这个属性后。
6、最后要提醒的是src里面不仅可以写本地的文件，也可以写远程的文件地址，如下图所示。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<audio id="myaudio"></audio>
</body>
<script>
// window.onload = function() {
//页面加载完成之后，通过给audio添加autoplay属性，音频下载完成之后自动播放
// var oAudio = document.getElementById('myaudio');
// oAudio.src = 'Le_Papillon.mp3';
// }
//mp3文件名
var mp3List = [
'Girlfriend.mp3',
'Have A Nice Day.mp3',
'Le Papillon.mp3',
'She Is.mp3',
'Tik Tok.mp3'
],
//文件路径
baseUrl = '../music/';
function getMusic(list) {
var len = list.length,
num = parseInt(Math.random()*len, 10),
music = baseUrl + list[num];
if(music) {
return music;
} else {
getMusic(list, baseUrl);
}
}
canPlay(playAudio);
//查看是否支持audio标签，如果支持，预加载当前指向mp3文件
function canPlay(callback) {
var currentFile = getMusic(mp3List);
try {
var audio = new Audio();
audio.oncanplay = function() {
callback(currentFile);
}
audio.src = currentFile;
audio.load();
}catch(e){
callback(false, e);
}
}
//play
function playAudio(currentFile) {
// Check for audio element support.
if (window.HTMLAudioElement && currentFile) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.src = currentFile;
if (oAudio.paused) {
oAudio.play();
}
else {
oAudio.pause();
}
oAudio.onended = function() {
oAudio.src = getMusic(mp3List);
oAudio.play();
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
</script>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
