HTML5 audio標簽自制音樂播放器

相關技能

  • 香港彩票透码 www.kptln.icu HTML5+CSS3(實現頁面布局和動態效果)

  • Iconfont(使用矢量圖標庫添加播放器相關圖標)

  • LESS (動態CSS編寫)

  • jQuery(快速編寫js腳本)

  • gulp+webpack(自動化構建工具,實現LESS,CSS,JS等編譯和壓縮代碼)

  • 實現的功能

  • 播放暫停(點擊切換播放狀態)

  • 下一曲(切換下一首)

  • 隨機播放(當前歌曲播放完自動播放下一曲)

  • 單曲循環(點擊隨機播放圖標可切換成單曲循環)

  • 音量調節(鼠標移入滑動設置音量大?。?/p>

  • 歌曲進度條(可點擊切換進度直接跳,也可以點擊小圓點拖拽切換進度)

  • 實時歌詞(點擊詞,切換歌詞界面,根據實時進度自動滾動歌詞)

  • 喜歡(點擊添加了一個active效果)

  • 分享(可以直接分享到新浪微博)

  • audio 標簽使用

  • autoplay 自動播放

  • loop 循環播放

  • volume 音量設置

  • currentTime 當前播放位置

  • duration 音頻的長度

  • pause 暫停

  • play 播放

  • ended 返回音頻是否已結束

  • 播放和暫停代碼

    _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('')
     }
     });
    }
  • 音樂進度條代碼

    _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 +'%');
     }
     }
     });
    }
  • 歌詞添加代碼

    _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是我繼續創作的動力,非常感謝?。?!源碼加群

    來源:itnose


上一篇: canvas學習總結三:繪制路徑-線段

下一篇: 手機app的web端開發,本地數據存儲都有什么方法?

分享到: 更多
内蒙古时时跨度走势图 pk10稳赚技巧方案 幸运28最牛稳赚模式 红马计划软件手机版v1.02 多赢软件免费 北京pk10官网开奖记录 比分 天厚实盘可以提现吗 七星彩稳赚法 时时彩个位单双判断 重庆时时彩必中规律 北京pk赛车开结果 时时彩怎么才能稳赚不赔 黑马人工计划软件安装 重庆时时彩开奖直播 今天双色球开奖结果