뮤직 플레이어 제작예(html5)-H5 튜토리얼-php.cn

뮤직 플레이어 제작예(html5)

PHP中文网

풀어 주다： 2017-06-20 14:00:00

원래의

3698명이 탐색했습니다.

实现的功能

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

audio 标签使用

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(&#39;click&#39;, function(){if (_this.audio.paused) {
            _this.audio.play();
            $(this).html(&#39;&#39;);
        } else {
            _this.audio.pause();
            $(this).html(&#39;&#39;)
        }
    });
}

로그인 후 복사

🎜음악 진행바코드🎜

_Music.prototype.volumeDrag = function(){var _this = this;this.btn.on(&#39;mousedown&#39;, function(){
        _this.clicking = true;
        _this.audio.pause();
    })this.btn.on(&#39;mouseup&#39;, function(){
        _this.clicking = false;
        _this.audio.play();
    })this.progress.on(&#39;mousemove click&#39;, function(e){if(_this.clicking || e.type === &#39;click&#39;){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(&#39;width&#39;, volume *100 +&#39;%&#39;);
            }
        }
    });
}

로그인 후 복사

🎜가사코드 추가🎜

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

로그인 후 복사

🎜코드가 많아 생략하겠습니다 하나씩 추가해 보세요. 마음에 드시면 좋아요를 눌러주세요. (내 GitHub에 별표를 주셔도 됩니다.) 여러분의 좋아요와 별표는 제가 계속 창작할 수 있는 원동력이 됩니다. 정말 감사합니다! ! ! 소스 코드 그룹 🎜

위 내용은 뮤직 플레이어 제작예(html5)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!