1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。
2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。
3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自动播放，如下图所示。
4、还有一个loop属性，是用来控制音频文件是否循环播放的，如下图所示。
5、接下来，preload属性是用来告诉音频文件是否预加载的，加上这个属性后。
6、最后要提醒的是src里面不仅可以写本地的文件，也可以写远程的文件地址，如下图所示。
<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>本回答被提问者和网友采纳
如何用js控制audio元素连续播放mp3文件
1、首先我们先来看一下音频元素最基本的应用以及样式，如下图所示，运用audio元素即可,controls是用来控制是否显示控制条。2、另外音频文件的格式也可以多样，如下图所示，也可以是ogg文件。3、接下来我们来看一下音频元素的属性，上面创建的音频元素你发现它需要手动点击才能播放。如果你加了autoplay就会自...
如何用js控制audio元素连续播放mp3文件
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 ...
JS纯前端实现audio音频分片播放
首先，利用File对象转ArrayBuffer。用户上传的文件（如MP3、OGG或WAV格式）被封装为一个File对象。我们将其转换为ArrayBuffer类型，以便进行进一步处理。转换代码如下：使用readAsArrayBuffer()方法进行转换。转换后的ArrayBuffer数据被解析为多个音频片段，类似于将音频文件拆分并存入具有地址的“小屋”中。为实现...
js播放音频代码(js播放mp3)
怎么用js实现播放音频？1、JS播放音乐需要区分浏览器，来使用不用的对象来播放音乐。2、在播放控制上要有【播放】和【停止】来控制音乐的播放。3、基于以上思路，代码如下：请问javascript的函数内部如何播放声音文件？可以用bgsound标签。html head script functioninit(){ if(判断条件有消息){ document.g...
js中怎么让音频重复播放
然后这个是主要的js方法：function Orderprocessing1(){var vid = document.getElementById("myVideo");\/\/获取音频对象var start = 0;\/\/定义循环的变量var times=3;\/\/定于循环的次数vid.addEventListener("ended",function() {vid.play();\/\/启动音频，也就是播放start++;\/\/循环start == times ...
利用HTML5\/JS有没有办法实现快速循环播放?
a.loop = true;audios.push(a) ;} \/\/ 调用下面函数之前需要先确定audio已经完全载入，可以通过audio的readystate接口进行判断。\/\/这里直接就写成立即执行的方式了。(function playSingle(i){ \/\/用递归写的，迭代也可行 if ( i > 0 ) { audios[i-1].play() ;setTimeout(function(){ play...
如何使用JS代码获取audio的播放时间,并显示播放进度?麻烦贴一下代码示例...
<audio id="audio" controls> <source src="horse.ogg" type="audio\/ogg"> <source src="horse.mp3" type="audio\/mpeg"> 您的浏览器不支持 audio 元素。<\/audio> <script> var audio=document.getElementById("audio");audio.duration\/\/播放时间 audio.currentTime\/\/播放进度 <\/script> ...
html5的audio在手机网页上无法自动加载\/播放音乐,能否实现
在手机网页上，HTML5的audio元素可能无法实现自动加载\/播放音乐，这是由于安卓和iOS系统默认不允许开发者进行自动播放，除非用户进行页面操作。一种解决方法是，在用户进行操作时，利用touch事件控制音乐播放。如果页面在微信中发布，可以尝试以下方法：编写一段JavaScript代码如下：javascript document....
请问javascript的函数内部如何播放声音文件?
可以用<bgsound>标签。<html> <head> <script> function init(){ if(判断条件有消息){ document.getElementById("sound").src="sound.wav";或者document.all.sound.src="sound.wav";或者document.getElementsByName("*").sound.src="sound.wav";} } <\/script> <\/head> <body> <bgsound id...
js解决音频audio在IOS系统下无法自动播放问题
ios中使用audio，日常踩坑 必须！！！点击后才调用xxx.play()这个方法 但是我们音频链接数据如果是网络请求而来的，那我们可以这样做：1.在无播放链接的情况下先调用一次xxx.play()，然后暂停xxx.pause()2.请求到数据以后，替换链接 3.判断readyState的值 0 = HAVE_NOTHING - 没有关于音频是否就绪的...
