JavaScript中使用html音频对象audio

时间:2025-01-15 07:05:26

这几天模仿豆瓣音乐网页端,使用audio对象写了个一个网页播放器,将audio对象的常规用法记录一下,这里是这个网页播放器的在线地址,大致功能有了,就是数据是自己手写的,功能后面再慢慢优化,可以的话再加个搜索功能,就完整了~~~现在技术还不到家

首先是在js中声明一个audio对象,你可以把他添加到dom中,也可以直接设置src播放:

var audio = new Audio();

添加到dom中,可以直接进行音频的播放控制:

audio.controls = true; // 显示
audio.autoplay = true; // 自动播放
audio.loop = true; // 设置循环播放

控制播放,暂停

(); //播放
(); //暂停

设置播放源

audio.src = ''; 

音量设置:

audio.volume; // 默认为1,也就是最大音量

获取音频的目前播放时间:

audio.currentTime; 

还用到了两个监听事件

( 'timeupdate', function() {} ); // 播放时间变化触发
( 'ended', function() {} ); // 播放结束触发