HTML5+CSS3
(페이지 레이아웃 및 동적 효과 구현)HTML5+CSS3
(实现页面布局和动态效果)
Iconfont
(使用矢量图标库添加播放器相关图标)
LESS
(动态CSS编写)
jQuery
(快速编写js脚本)
gulp+webpack
(自动化构建工具,实现LESS,CSS,JS等编译和压缩代码)
播放暂停(点击切换播放状态)
下一曲(切换下一首)
随机播放(当前歌曲播放完自动播放下一曲)
单曲循环(点击随机播放图标可切换成单曲循环)
音量调节(鼠标移入滑动设置音量大小)
歌曲进度条(可点击切换进度直接跳,也可以点击小圆点拖拽切换进度)
实时歌词(点击词,切换歌词界面,根据实时进度自动滚动歌词)
喜欢(点击添加了一个active效果)
分享(可以直接分享到新浪微博)
autoplay
自动播放
loop
循环播放
volume
音量设置
currentTime
当前播放位置
duration
音频的长度
pause
暂停
play
播放
ended
Iconfont
(벡터 아이콘 라이브러리를 사용하여 플레이어 관련 아이콘 추가)LESS
(동적 CSS 작성)
jQuery
(신속하게 js 스크립트 작성) 🎜🎜🎜🎜gulp+webpack
(자동화) LESS, CSS, JS 등의 컴파일 및 압축을 구현하는 도구 빌드) 🎜🎜🎜🎜 구현된 기능 🎜🎜🎜🎜재생 및 일시 정지(재생 상태를 전환하려면 클릭) 🎜🎜🎜🎜다음 노래(다음 노래로 전환) 🎜🎜🎜🎜 셔플 재생(현재 노래가 재생된 후 자동으로 다음 노래 재생)🎜🎜🎜🎜단일 루프(단일 루프로 전환하려면 무작위 재생 아이콘을 클릭하세요)🎜🎜🎜🎜볼륨 조정(마우스를 안쪽으로 움직여 슬라이드하세요) 볼륨 설정)🎜🎜🎜🎜 노래 진행률 표시줄(클릭하여 진행률을 전환하고 직접 점프하거나 작은 점을 클릭하고 드래그하여 진행률을 전환할 수 있음) 🎜🎜🎜🎜실시간 가사(단어 클릭) 가사 인터페이스를 전환하고 실시간 진행에 따라 자동으로 가사 스크롤) 🎜🎜🎜🎜좋아요(활성 효과 추가 클릭) 🎜🎜🎜🎜공유(Sina Weibo에 직접 공유 가능) 🎜🎜🎜🎜audio 🎜🎜🎜🎜autoplay
자동 재생🎜🎜🎜🎜loop 루프 재생🎜🎜🎜🎜<code>volume
볼륨 설정🎜🎜🎜🎜currentTime
현재 재생 위치🎜🎜🎜🎜길이
오디오 길이🎜 🎜🎜🎜일시 중지
일시 중지🎜🎜🎜🎜재생
재생🎜 🎜🎜🎜종료
오디오 종료 여부 반환🎜🎜🎜🎜코드 재생 및 일시정지 🎜_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에 별표를 주셔도 됩니다.) 여러분의 좋아요와 별표는 제가 계속 창작할 수 있는 원동력이 됩니다. 정말 감사합니다! ! ! 소스 코드 그룹 🎜
위 내용은 뮤직 플레이어 제작예(html5)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!