音频播放
使用audio标签
一些属性：
- autoplay 音频在就绪后马上播放
- controls 向用户显示控件，比如播放按钮
- loop 每当音频结束时重新开始播放
- preload 音频在页面加载时进行加载，并预备播放
- src 要播放的音频的URL
随便练练
function MiniPlayer() {
// 音乐列表
this.songs = [];
// 音乐名称
this.musicName = '';
// 记录当前播放索引
this.index = 0;
// 当前播放音乐的时长
this.duration = 0;
// 当前播放的位置
this.currentTime = 0;
// 播放状态
this.playStatus = false;
// 音轨长度
this.trackLen = 0;
// 音轨定时器
this.trackTimer = null;
// 获取元素
this.$ = function(className){
return document.querySelector(className)
}
}
MiniPlayer.prototype = {
// 初始化
init: function() {
this.playerDom = document.createElement('audio');
this.changeBtnStatus()
this.prev();
this.next();
this.drawTrack();
},
// 播放音乐
play: function() {
let that = this;
that.duration = that.playerDom.duration;
that.playerDom.play();
that.playProcess();
this.$('.music-name').innerText = this.songs[this.index].replace('./audio/','');
this.$('.poster-pic').style.animation = `rotateMe 4s linear infinite`
this.trackTimer = setInterval(function() {
for(let i=0; i< that.trackLen; i++){
document.getElementsByClassName('items')[i].style.height = that.randomNum(100) + 'px'
}
}, 280)
},
// 暂停音乐
pause: function() {
clearInterval(this.trackTimer)
this.playerDom.pause();
},
// 播放进度条控制
playProcess: function() {
let that = this;
this.playerDom.oncanplay = function() {
that.duration = that.playerDom.duration;
}
let timer = setInterval(function() {
let dis = that.playerDom.currentTime/that.duration*that.$('.process-bar').clientWidth;
that.$('.process').style.width = dis + 'px';
// 判断音乐是否播放结束
if(that.playerDom.currentTime === that.duration){
timer = clearInterval(timer);
// 重置进度条
that.$('.process').style.width = 0;
// 自动跳转至下一曲
that.index++;
if(that.index > that.songs.length-1){
that.index = 0;
}
that.playerDom.src = that.songs[that.index];
that.play()
}
})
},
// 绘制音轨
drawTrack: function() {
let that = this;
this.trackLen = Math.floor(this.$('.track-wrapper').clientWidth / this.$('.items').clientWidth)
let tracks = '';
for(let i =0; i< this.trackLen; i++){
let left = this.$('.items').clientWidth * i + 'px';
tracks += `<div class="items" style="left:${left}"></div>`;
}
this.$('.track-wrapper').innerHTML = tracks;
},
// 随机数
randomNum: function(num){
return Math.floor(Math.random()*(num+1))
},
// 上一曲
prev: function () {
let that = this;
this.$('.prev').onclick = function() {
// 重置进度条
that.$('.process').style.width = 0;
clearInterval(that.trackTimer);
--that.index;
if(that.index < 0){
that.index = that.songs.length -1;
}
that.playerDom.src = that.songs[that.index];
that.play()
}
},
// 下一曲
next: function () {
let that = this;
this.$('.next').onclick = function () {
clearInterval(that.trackTimer);
// 重置进度条
that.$('.process').style.width = 0;
++that.index;
if(that.index > that.songs.length-1) {
that.index = 0;
}
that.playerDom.src = that.songs[that.index];
that.play()
}
},
// 改变音轨
changePlaySrc: function() {
this.playerDom.src = this.songs[this.index];
},
// 添加音乐
addMusic: function(src) {
this.songs.push(...src);
this.playerDom.src = this.songs[this.index];
},
// 播放暂停按钮切换
changeBtnStatus: function() {
let that = this;
this.$('.play').onclick = function() {
if(this.playStatus) {
// 暂停
this.classList.replace('icon-24gf-pauseCircle', 'icon-24gf-playCircle')
that.pause();
this.playStatus = false;
}else {
// 播放
this.classList.replace('icon-24gf-playCircle', 'icon-24gf-pauseCircle')
that.play(0);
this.playStatus = true;
}
}
}
}
let miniPlayer = new MiniPlayer()
miniPlayer.init()
miniPlayer.addMusic(['./audio/G.E.M.邓紫棋 - 泡沫.mp3','./audio/大壮 - 伪装 (DJ小鱼儿版).mp3','./audio/白智英 - 총 맞은 것처럼 (Live).mp3'])
视频播放
使用video标签
一些属性：
- autoplay 视频在就绪后马上播放
- controls 向用户显示控件，比如播放按钮
- height 设置视频播放器的高度
- width 设置视频播放器的宽度
- loop 当媒介文件王城播放后再次开始播放
- preload 视频在页面加载时进行加载，并预备播放
- src 要播放的视频的URL
多媒体播放
● 常用方法：load() 加载、 play() 播放、 pause() 暂停
● 常用属性：
a) currentTime 视频播放的当前进度
b) duration:视频的总时间 100000/60
c） paused:视频播放的状态
● 常用事件：
a) oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
b) ontimeupdate:通过该事件来报告当前的播放进度.
c) onended:播放完时触发—重置
网友评论