HTML5 学习—— 音频

最新推荐文章于 2023-09-02 22:42:10 发布

原创最新推荐文章于 2023-09-02 22:42:10 发布 · 821 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML5中音频元素的html属性，包括src、autoplay、controls、loop和muted，以及在JavaScript中用于控制音频的接口属性和方法，如paused、volume、duration等。此外，还讲解了相关接口事件的使用，并给出了背景音乐、播放列表和简易播放器的实例应用。

视频的html标记： $< v i d e o > < / v i d e o >$

1 html属性

1.1 src

src：设置音频的URL播放路径。

1.2 autoplay

autoplay：自动播放。浏览器不支持自动播放。
浏览器规定：媒体必须通过用户交互才能播放。

1.3 controls

controls：设置是否显示播放控制面板。

1.4 loop

loop：设置是否循环播放。

1.5 muted

muted：设置是否默认静音。

2 接口属性(用在js中)

2.1 paused

paused：判断音频是否处于暂停状态。

2.2 volume

volume：返回/设置当前音频播放的音量（取值：0-1）。

2.3 duration

duration：返回音频播放的总时长（单位：秒）。

// 将总时长转换成 00:00 的格式，由于实型数据的不稳定性，此处需要转成整数
parseInt(myAudio.duration/60) + “:” + parseInt(myAudio.duration%60)

2.4 currentTime

currentTime：返回/设置音频播放的当前位置（依靠当前秒数来实现）。

2.5 currentSrc

currentSrc：返回音频的URL地址。

2.6 ended

ended：返回音频的播放是否结束。

2.7 muted

muted：返回/设置音频的静音效果。

2.8 playbackRate

playbackRate：设置音频播放的速度。（0.5-慢速播放，1-正常，2-二倍播放）

3 接口方法(用在js中)

3.1 play()

play()：让音频播放。

3.2 pause()

pause()：让音频暂停。

4 接口事件(用在js中)

4.1 play

play：当音频文件播放（调用了play()方法）时触发。

4.2 pause

pause：当音频文件暂停（调用了pause()方法）时触发。

4.3 ended

ended：当音频文件播放结束时触发。

4.4 volumechange

volumechange：当音量发生变化时触发。

4.5 ratechange

ratechange：当播放速度发生变化时触发。

4.6 timeupdate

timeupdate：当音频的当前播放位置发生变化时触发，只要音频处于播放状态就会一直触发该事件。

4.7 durationchange

durationchange：当音频的总时长发生变化时触发，即播放的歌曲发生变化时触发。

5 接口属性和接口方法的使用

（1）接口属性和接口方法必须使用音频对象的实例进行调用。
（2）如何获取音频对象的实例：

     //方法1：获取页面DOM结构中的<audio>节点。
     
     var myAudio = document.getElementById(“myAudio”);
     alert(myAudio);    // [object HTMLAudioElement]

     //方法2：利用Audio构造函数创建实例。
     
     var myAudio = new Audio();   
     //等同于 var myAudio=document.createElement(“audio”);
     myAudio.src=“audio/01.mp3”;
     alert(myAudio);

6 实例

6.1 设置背景音乐

<audio src="audio/03.mp3" id="myAudio"></audio>
<div id="container">
	<div class="content">
		<span>欢迎来到我的网站</span>
		<img src="images/play.png" />
	</div>
</div>

var myAudio=document.querySelector("#myAudio");
var container=document.querySelector("#container");
var img=container.querySelector("img");

img.onclick=function(){
	if(myAudio.paused){
		// 暂停状态
		myAudio.play();
		img.src="images/pause.png";
	}else{
		// 播放状态
		myAudio.pause();
		img.src="images/play.png";
	}
}

6.2 歌曲播放列表

<div id="container">
	<h3>歌曲列表</h3>
	<ol>
		<li><a href="#" onclick="musicPlay('04')">女人心事 - 陶晶莹</a></li>
		<li><a href="#" onclick="musicPlay('05')">我怀念的 - 孙燕姿</a></li>
	</ol> 
	<div class="time">0:00</div>
	<div class="progress">
		<div class="progressBar"></div>
	</div>
</div>

var myMusic=new Audio();  // 创建音频实例
var timer;

var containerNode=document.querySelector("#container");
var timeNode=containerNode.querySelector(".time");
var progressNode=containerNode.querySelector(".progress");
var progressBarNode=containerNode.querySelector(".progressBar");
var progressWidth=progressNode.offsetWidth;

// 音频播放
function musicPlay(music){
	myMusic.src=`audio/${music}.mp3`;
	myMusic.play();
	timer=window.setInterval("getProgress()",500);
}

// 获取播放进度(当前时间，进度条)
function getProgress(){
	var totleTime=myMusic.duration;
	var currentTime=myMusic.currentTime;

	// 播放的当前时间
	var minute= parseInt(currentTime/60);
	var second=parseInt(currentTime%60);
	second=second>9?second:"0"+second;
	timeNode.textContent=minute + ":" + second;

	// 播放进度条	
	var progressBarWidth=currentTime/totleTime*progressWidth;
	progressBarNode.style.width=progressBarWidth + "px";

	if(myMusic.ended){
		window.clearInterval(timer);
		alert("播放结束");
	}
}

6.3 简易播放器

<div id="container">
	<div class="progress">
		<div class="progressBar"></div>
	</div>
	<div class="volumn">
		<input type="range" min="0" max="100" value="100" oninput="volumnChange()" />
		<output>100</output>
	</div>
	<div class="control">
		<span class="btn play">播放</span>
		<span class="btn pause">暂停</span>
		<span class="btn prev">上一首</span>
		<span class="btn next">下一首</span>
		<span class="btn backward">快退</span>
		<span class="btn forward">快进</span>			
		<span class="btn stop">停止</span>
	</div>
</div>

#container{
	width:500px;
	border:solid 1px #ff5857;
	background-color: #fff3f3;
	border-radius:6px;
	margin:50px auto;
	overflow: hidden;
}
#container .progress{
	width:inherit;height: 10px;
	background-color: #fff3f3;
}
#container .progressBar{
	width:0;height: inherit;
	background-color: #ff5857;
}
#container .control{
	margin: 20px auto;
	text-align: center;
	user-select: none;
}
#container .btn:hover{
	color:#ff5857;
}
#container .volumn{
	display: flex;
	justify-content: center;
	align-items:center;
	margin-top: 20px;
}

var container=document.querySelector("#container");
var play=container.querySelector(".play");
var pause=container.querySelector(".pause");
var next=container.querySelector(".next");
var prev=container.querySelector(".prev");
var forward=container.querySelector(".forward");
var backward=container.querySelector(".backward");
var stop=container.querySelector(".stop");
var alone=container.querySelector(".alone");

var progress=container.querySelector(".progress");
var progressBar=container.querySelector(".progressBar");
var progressWidth=progress.offsetWidth;

var myMusic=new Audio();
var music=["01","02","03"];
var currentMusic=0;

myMusic.src=`audio/${music[currentMusic]}.mp3`;
// 进度条
myMusic.ontimeupdate=function (){
	var currentTime=this.currentTime;
	var totalTime=this.duration;
	var progressBarWidth=currentTime/totalTime*progressWidth;
	progressBar.style.width=progressBarWidth + "px";
}
// 播放
play.onclick=function(){
	myMusic.play();
}
// 暂停
pause.onclick=function(){
	myMusic.pause();
}
// 下一首
next.onclick=function(){
	currentMusic=(currentMusic+1)%music.length;
	myMusic.src=`audio/${music[currentMusic]}.mp3`;
	play.click();
}
// 上一首
prev.onclick=function(){
	currentMusic--;
	if(currentMusic<0){
		currentMusic=music.length-1;
	}
	myMusic.src=`audio/${music[currentMusic]}.mp3`;
	play.click();
}
// 快进
forward.onclick=function(){
	myMusic.currentTime+=30;
}
// 快退
backward.addEventListener("click",function(){
	myMusic.currentTime-=30;
})
// 停止
stop.onclick=function(){
	myMusic.pause();
	myMusic.src=`audio/${music[currentMusic]}.mp3`;
}
//自动播放下一首
myMusic.addEventListener('ended',function(){
	console.log('结束');
	next.click();
})
myMusic.addEventListener('durationchange',function(){
	console.log('切歌了');
})
//控制音量大小
var inputVolumn=container.querySelector('input');
var textVolumn=container.querySelector('output');
function volumnChange(){
	textVolumn.textContent=inputVolumn.value;
	myMusic.volume=inputVolumn.value/100;
}