丸子学HTML（学习半小时 - H5媒体）

音频播放

使用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:播放完时触发—重置