必发88_必发88官网_必发888登录唯一网址

欢迎进入必发88网站了解最新信息.,必发88官网摇身一变成为世人嘱目的运动投注和网上赌场集团,因为在这里我们可以进行必发888登录唯一网址下载,提供消费者预览版简体中文版下载。

来自 必发88官网 2019-05-21 09:05 的文章
当前位置: 必发88官网 > 必发88官网 > 正文

大力果然依然卖力啊,audio标签自制音乐播放器必

一首很有意思的音乐,为啥说她很有意思呢,当开始听的时候,前25s中都是一老黑鬼在用低沉的电子合成音唱着rap,乍一听赶脚好难过,但从Miley那独特的嗓音一加入后,整曲的基调就变得嘻哈而又欢快,她奇特的音质总给人一种压抑的快感,就像是被人捏着鼻子唱歌一样,但有趣的是正是这种赶脚才能唱出一种达到极致而又不爆发的快乐,一种贴着激情两个字的上沿而又不越线的赶脚,实在是很有意思的一曲, WE CAN'T STOP编辑 《We Can't Stop》是一支2013年的欧美流行音乐单曲,收录自麦莉·赛勒斯的第四张录音室专辑《Bangerz》中,被RCA唱片公司发布于2013年6月3日。这首歌集成了R&B、舞曲、抒情和House Party的音乐风格。单曲占据了新西兰、英国单曲排行榜的冠军榜首,另外这张单曲超过了一百万份的销售。2013年7月26日,MV以最快的速度大破VEVO预览记录,预览次数超过1亿次。

很多时候我们累了,不是身体透支,而是灵魂超重。与其盲目赶脚,不如静听风声。我一向是不喜风的,因为它所带来的寒冷远远超过和煦。但是为了灵魂能够轻舞,我又不得不将身体裸露在风里。

实现的功能

  • 播放暂停(点击切换播放状态)
  • 下一曲(切换下一首)
  • 随机播放(当前歌曲播放完自动播放下一曲)
  • 单曲循环(点击随机播放图标可切换成单曲循环)
  • 音量调节(鼠标移入滑动设置音量大小)
  • 歌曲进度条(可点击切换进度直接跳,也可以点击小圆点拖拽切换进度)
  • 实时歌词(点击词,切换歌词界面,根据实时进度自动滚动歌词)
  • 必发88官网,喜欢(点击添加了一个active效果)
  • 分享(可以直接分享到新浪微博)

习惯了晚睡,索性找自己喜欢的事做。于是找了一首老歌,开始单曲循环。听着它,让自己浮躁的灵魂安静地小憩。

播放和暂停代码

_Music.prototype.playMusic = function(){
    var _this = this;
    this.play.on('click', function(){
        if (_this.audio.paused) {
            _this.audio.play();
            $(this).html('');
        } else {
            _this.audio.pause();
            $(this).html('')
        }
    });
}

预览地址: https://boloog.github.io/music/
GitHub地址: https://github.com/boloog/music/

audio 标签使用

  • autoplay 自动播放
  • loop 循环播放
  • volume 音量设置
  • currentTime 当前播放位置
  • duration 音频的长度
  • pause 暂停
  • play 播放
  • ended 返回音频是否已结束

歌词添加代码

_Music.prototype.readyLyric = function(lyric){
    this.lyricBox.empty();
    var lyricLength = 0;
    var html = '<div class="lyric-ani" data-height="20">';
    lyric.forEach(function(element,index) {
        var ele = element[1] === undefined ? '^_^歌词错误^_^' :  element[1];
        html  = '<p class="lyric-line" data-id="' index '" data-time="'   element[0]   '"> '    ele   ' </p>';
        lyricLength  ;
    });
    html  = '</div>';
    this.lyricBox.append(html);
    this.onTimeUpdate(lyricLength);
}

代码还有很多就不一一添加了,觉得还行的话可以点下喜欢(也可以在我的GitHub给个Star),你的喜欢和Star是我继续创作的动力,非常感谢!!!

有什么疑问或问题,欢迎大家指出。

相关技能

  • HTML5 CSS3(实现页面布局和动态效果)
  • Iconfont(使用矢量图标库添加播放器相关图标)
  • LESS (动态CSS编写)
  • jQuery(快速编写js脚本)
  • gulp webpack(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码)

音乐进度条代码

_Music.prototype.volumeDrag = function(){
    var _this = this;
    this.btn.on('mousedown', function(){
        _this.clicking = true;
        _this.audio.pause();
    })
    this.btn.on('mouseup', function(){
        _this.clicking = false;
        _this.audio.play();
    })
    this.progress.on('mousemove click', function(e){
        if(_this.clicking || e.type === 'click'){
            var len = $(this).width(),
                left = e.pageX - $(this).offset().left,
                volume = left / len;
            if(volume <= 1 || volume >= 0){
                _this.audio.currentTime =  volume * _this.audio.duration;
                _this.progressLine.css('width', volume *100  '%');
            }
        }
    });
}

声明:此文章版权归饥人谷和本人所有,转载须得到本人同意,项目为开源项目,不能用于商业应用,仅供学习。

本文由必发88官网发布于必发88官网,转载请注明出处:大力果然依然卖力啊,audio标签自制音乐播放器必

关键词: 必发88官网