最近用angular2开发了一个播放器的小页面,但有小部分人反映听了一段就停了,是什么原因,也没有捕获到时什么错误
import { Injectable, EventEmitter } from '@angular/core';
import { Audio } from '../model/audio';
import { PlayData } from '../model/play-data';
import { OriginalAudio } from '../model/original-audio';
/**
* 音频服务,只关心播放列表控制与进度控制
* 不提供组件支持,只提供列表控制方法接口及进度控制接口
*/
@Injectable()
export class AudioService {
public playDataEvent: EventEmitter<PlayData>;
public playEndEvent: EventEmitter<Audio>;
// 主音频标签
private _audio: HTMLAudioElement;
// 当前列表中的音频
private playList: Audio[];
// 当前播放的数据
private playData: PlayData;
private listenInterval;
// 播放模式 1循环 2:单 3:随机
private playModel: number;
// 当前播放的详细数据
private currAudioData: Audio;
/**
* 创建新的音频标签
*/
constructor() {
this.playDataEvent = new EventEmitter();
this.playEndEvent = new EventEmitter();
this._audio = document.createElement('audio');
this._audio.autoplay = false;
this.playModel = 1;
this._audio.onplay = () => {
let that = this;
this.listenInterval = window.setInterval(() => {
that.playData.Current = that._audio.currentTime;
that.playData.Url = that._audio.src;
that.playData.During = that._audio.duration;
that.playData.Data = that._audio.buffered &&
that._audio.buffered.length ?
(that._audio.buffered.end(0) || 0) :
0;
}, 1000);
this.playData.IsPlaying = true;
this.currAudioData = this.playList[this.playData.Index];
this.playDataEvent.next(this.playData);
};
this._audio.onended = () => {
window.clearInterval(this.listenInterval);
this.FillPlayData();
this.playData.IsPlaying = false;
this.playData.Current = 0;
this.playDataEvent.next(this.playData);
this.playEndEvent.next(this.playList[this.playData.Index]);
this.TryNext();
};
this._audio.onabort = () => {
window.clearInterval(this.listenInterval);
this.playData.Current = this._audio.currentTime;
this.playData.Url = this._audio.src;
this.playData.During = this._audio.duration;
this.playData.Data = this._audio.buffered &&
this._audio.buffered.length ?
(this._audio.buffered.end(0) || 0) :
0;
this.playData.IsPlaying = false;
};
this._audio.onpause = () => {
window.clearInterval(this.listenInterval);
this.playData.Current = this._audio.currentTime;
this.playData.Url = this._audio.src;
this.playData.During = this._audio.duration;
this.playData.Data = this._audio.buffered &&
this._audio.buffered.length ?
(this._audio.buffered.end(0) || 0) :
0;
this.playData.IsPlaying = false;
this.playDataEvent.next(this.playData);
};
this.playData = { Style: 0, Index: 0 };
this.playList = [];
}
/**
* 1.列表中无此音频则添加并播放
* 2.列表中存在此音频但未播放则播放
* 3.列表中存在此音频且在播放则暂停
* @param audio
*/
public Toggle(audio?: Audio): void {
let tryGet = audio ?
this.playList.findIndex((p) => p.Url === audio.Url) :
this.playData.Index;
if (tryGet < 0) {
this.playList.push(audio);
this.PlayIndex(this.playList.length);
} else {
if (tryGet === this.playData.Index) {
if (this._audio.paused) {
this._audio.play();
this.playData.IsPlaying = true;
} else {
this._audio.pause();
this.playData.IsPlaying = false;
}
} else {
this.PlayIndex(tryGet);
}
}
}
/**
* 若列表中无此音频则添加到列表的最后
* 若列表中无音频则添加后并播放
* @param audio
*/
public Add(audio: Audio): void {
this.playList.push(audio);
if (this.playList.length === 1) {
this.PlayIndex(0);
}
}
/**
* 移除列表中指定索引的音频
* 若移除的就是正在播放的音频则自动播放新的同索引音频,不存在此索引则递减
* 若只剩这一条音频了则停止播放并移除
* @param index
*/
public Remove(index: number): void {
this.playList.splice(index, 1);
if (!this.playList.length) {
this._audio.src = '';
} else {
this.PlayIndex(index);
}
}
/**
* 下一曲
*/
public Next(): void {
switch (this.playData.Style) {
case 0:
if (this.playData.Index < this.playList.length) {
this.playData.Index++;
this.PlayIndex(this.playData.Index);
}
break;
case 1:
this.playData.Index = (this.playData.Index + 1) % this.playList.length;
this.PlayIndex(this.playData.Index);
break;
case 2:
this.playData.Index = (this.playData.Index + 1) % this.playList.length;
this.PlayIndex(this.playData.Index);
console.log('暂不考虑随机播放将视为列表循环播放');
break;
case 3:
this._audio.currentTime = 0;
break;
default:
if (this.playData.Index < this.playList.length) {
this.playData.Index++;
this.PlayIndex(this.playData.Index);
}
break;
}
}
/**
* 上一曲
*/
public Prev(): void {
switch (this.playData.Style) {
case 0:
if (this.playData.Index > 0) {
this.playData.Index--;
this.PlayIndex(this.playData.Index);
}
break;
case 1:
this.playData.Index = (this.playData.Index - 1) < 0 ?
(this.playList.length - 1) :
(this.playData.Index - 1);
this.PlayIndex(this.playData.Index);
break;
case 2:
this.playData.Index = (this.playData.Index - 1) < 0 ?
(this.playList.length - 1) :
(this.playData.Index - 1);
this.PlayIndex(this.playData.Index);
console.log('暂不考虑随机播放将视为列表循环播放');
break;
case 3:
this._audio.currentTime = 0;
break;
default:
if (this.playData.Index > 0) {
this.playData.Index--;
this.PlayIndex(this.playData.Index);
}
break;
}
}
/**
* 将当前音频跳转到指定百分比进度处
* @param percent
*/
public Skip(percent: number): void {
this._audio.currentTime = this._audio.duration * percent;
this.playData.Current = this._audio.currentTime;
}
public PlayList(): Audio[] {
return this.playList;
}
public PlayData(): PlayData {
return this.playData;
}
/**
* 用于播放最后强行填满进度条
* 防止播放进度偏差导致的用户体验
*/
private FillPlayData(): void {
this.playData.Current = this._audio.duration;
this.playData.Data = this._audio.duration;
}
/**
* 尝试播放指定索引的音频
* 索引不存在则尝试递增播放,又失败则递减播放,又失败则失败
* @param index
*/
private PlayIndex(index: number): void {
index = this.playList[index] ? index :
this.playList[index + 1] ? (index + 1) :
this.playList[index - 1] ? (index - 1) : -1;
if (index !== -1) {
this._audio.src = this.playList[index].Url;
if (this._audio.paused) {
this._audio.play();
this.playData.IsPlaying = true;
}
this.playData.Index = index;
} else {
console.log('nothing to be play');
}
}
private TryNext(): void {
if (this.playModel === 1) {
if (this.playData.Index > (this.playList.length - 1)) {
this.PlayIndex(0);
}
this.Next();
} else if (this.playModel === 2) {
const index = this.playData.Index;
this.PlayIndex(index);
} else if (this.playModel === 3) {
const max = this.playList.length;
const num = Math.random() * max;
const index = parseInt(num.toString(), 10);
this.PlayIndex(index);
}
}
/**
* 设置播放模式
*/
public SetPlayModel(model: number): void {
if (model === 1) {
this.playModel = 1;
} else if (model === 2) {
this.playModel = 2;
} else if (model === 3) {
this.playModel = 3;
}
}
public getCurrAudioData(): Audio {
return this.currAudioData;
}
/**
* 全部播放
*/
public AddRange(list: Audio[],auto=false): void {
this.playData.IsPlaying = false;
this.playList = [];
list.forEach(x => {
const tryIndex = this.playList.findIndex((p) => p.Url === x.Url);
if (tryIndex < 0) {
this.playList.push(x);
}
});
this.PlayIndex(0);
if(auto==false) this._audio.pause();
}
/**
* OriginalAudio 类型转 Audio类型
*/
public ConvertToAudio(x: OriginalAudio): Audio {
const audio: Audio = {
Cover: x.Cover,
DuringSecond: '',
Id: x.Id,
Size: 0,
Title: x.Title,
Url: x.Source
};
return audio;
}
/**
* 预加载
* 设置 playData playList
*/
public PreLoad() {
if (this.playList.length > 0) {
if (this.playData.Url === undefined) {
this.PrePlayIndex();
}
}
}
private PrePlayIndex(): void {
this._audio.src = this.playList[0].Url;
if (this._audio.paused) {
this.playData.IsPlaying = false;
}
this.playData.Index = 0;
}
public Run(index) {
this.PlayIndex(index);
}
}
这个是播放的核心代码
没有代码,不知道播放啥玩意儿,不知道小部分人是干啥的,不知道是什么网络,这是新的综艺节目
《蒙面编程大神猜猜猜》么?
css3不是可以直接加video标签了吗
不太理解你想要表达的意思,你说明白点?我的问题是为什以有的播放了一段就停了
自己解决了