vue 한 페이지 가 음악 재생 기 를 실현 하 는 예제
효 과 는 다음 과 같 습 니 다:
프로젝트 주소:https://github.com/ermu592275254/MiniMusicPlayer
프레젠테이션 주소:https://ermu592275254.github.io/MiniMusicPlayer/(노래 링크 가 실 효 됨)
개발 전 구상
인터페이스
음악 재생 기 를 만 들 려 면 화면 이 반드시 멋 있어 야 한다.너무 낮 아.노래 들 으 니까 느낌 이 없어.그 자체 가 출근 할 때 사용 하기 위해 왕 이 클 라 우 드 음악 과 비슷 한 화면 을 만 들 었 는데 크기 가 적당 하 다.휴대 전화 단말 기 를 호 환 할 필요 가 없다.
css 로 아이콘 만 들 기
간단 하고 실 용적 인 수 요 를 가지 고 고려 할 때 아이콘 은 SVG,url 또는 css 를 사용 할 수 있 습 니 다.url 에 비해 SVG 와 css 가 더 좋 습 니 다.수련 을 위해 최종 선택 한 css.after 와 before 를 잘 이용 하면 dom 내장 을 많이 줄 일 수 있 습 니 다.
.next {
position: relative;
display: inline-block;
height: 36px;
width: 36px;
border: 2px solid #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
.next:before {
content: '';
height: 0;
width: 0;
display: block;
border: 10px transparent solid;
border-right-width: 0;
border-left-color: #fff;
position: absolute;
top: 8px;
left: 10px;
}
.next:after {
content: '';
height: 20px;
width: 4px;
display: block;
background: #fff;
position: absolute;
top: 8px;
left: 22px;
}
레코드 를 하나 그리다왕 이 운 의 음반 은 매우 재 미 있 습 니 다.저도 음반 을 만 들 겠 습 니 다!box-shadow 를 잘 사용 하면 하나의 요소 로 재 미 있 는 음반 효 과 를 낼 수 있 습 니 다.
.disc {
position: relative;
margin-top: 10%;
margin-left: 10%;
width: 300px;
height: 300px;
border-radius: 300px;
transform: rotate(45deg);
background-image: radial-gradient(5em 30em ellipse, #fff, #000);
border: 2px solid #131313;
box-shadow: 0 0 0 10px #343935;
opacity: 0.7;
}
range 로 진행 바 를 만들다audio 자체 의 스타일 이 보기 싫 고 브 라 우 저가 보 여 주 는 효과 도 다르다.물론 오디 오 스타일 을 수정 할 수 있 습 니 다.전통 적 인 방법 은 controls 속성 을 통 해 오디 오 를 숨 긴 다음 div 로 대체 하 는 것 입 니 다.지금 은 html 5 시대 이 니 당연히 장면 에 더욱 부합 되 는 새로운 요소 인 range 를 사용 해 야 한다.
input[type=range] {
-webkit-appearance: none;
width: 80%;
height: 8px;
border-radius: 10px;
background-color: #fff;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 8px;
border-radius: 20px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -3px;
height: 14px;
width: 14px;
background: #eb7470;
border-radius: 50%;
border: solid 3px #fff;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}
배경 필터 모호그림 을 배경 으로 설정 한 느낌 이 좋 습 니 다.전체 플레이어 의 비 주 얼 이 배경 에 반 을 제공 했다 고 할 수 있 습 니 다.설정 도 간단 합 니 다.css 3 필 터 를 사 용 했 습 니 다.
.bg-blur {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: blur(20px);
z-index: -1;
}
배경 그림 은 js 를 통 해 제 어 됩 니 다.
<div class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></div>
노래 자원기어 내리다
새우 홈 페이지 에 직접 가서 network 를 열 고 url 을 postman 에 복사 하여 요청 합 니 다.헤 더 스 수정 을 통 해 Refer 를 검사 할 수 있 습 니 다.즉,새우 가 허용 하 는 도 메 인 이름 만 이 인터페이스 에 접근 할 수 있다 는 것 이다http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs
크로스 오 버 문 제 를 해결 하 다.
인터페이스 가 jsonp 를 지원 하기 때문이다.처음에 chrome 브 라 우 저 를 크로스 필드 로 설정 한 다음$.ajax 를 통 해 jsonp 요청 을 하려 고 했 습 니 다.정상적으로 접근 할 수 있 습 니 다.
그 러 다 갑자기 안 되 겠 어 요.새우 가 제한 을 한 거 아니에요?
그 다음 에 node 로 서 비 스 를 시작 하여 refer 를 위조 하여 요청 을 한 다음 에 요청 을 페이지 로 전송 합 니 다.무심결에 대 리 를 썼 다.
...
case '/song':
let songOptions = {
url: 'http://api.xiami.com/web?'+ urlArr[1],
headers: {
'Referer': 'http://m.xiami.com/'
}
};
function callback1(error, response, body) {
if (!error && response.statusCode == 200) {
res.end(body);
}
}
request(songOptions, callback1);
break;
...
가사 스크롤강 격 이 비교적 높 은 플레이어 로 서 가사 스크롤 은 필수 적 이다.
의 원리
모든 가 사 를 하나의 대상 으로 저장 하고 대응 하 는 시간 이 있다.노래 가 재생 되 는 현재 시간 이 가사 보다 크 거나 같은 시간 이 고 이 가사의 다음 가사 보다 작 으 면 이 가 사 를 시각 영역 으로 스크롤 합 니 다.글꼴 색상 을 수정 합 니 다.
가 사 를 포맷 하 다
인터페이스 가 돌아 오 는 가 사 는 어리둥절 한 표정 으로 자세히 연구 해 보 니 규칙 적 이 었 다.
[ti:aLIEz]
[ar:SawanoHiroyuki[nZk]:mizuki]
[al:o1]
[ly: ]
[mu: ]
[ma:]
[pu:]
[by:ttpod]
[total:268512]
[offset:0]
[00:00.000]<195>aLIEz <199>- <451>SawanoHiroyuki[nZk]:mizuki
[x-trans] - SawanoHiroyuki[nZk]:mizuki
[00:01.095]<201> <250>~<200>:<201><200> <199> <300>
[x-trans]
[00:02.846]<200> <150> <150>:<200><200> <351> <349>
[x-trans]
[00:20.828]<200>Q<250>め<200>つ<201>け<149>ば<201>か<349>り
[x-trans]
[00:23.279]<200> <200> <200>れ<200>を<200> <400>た
[x-trans]
[00:24.979]<200>チ<200>`<200>プ<450>な<550>hokori<350>で
[x-trans]
......
refactoringLyrics(lyric){
let text = lyric.split('[offset:0]')[1];
let textArr = text.split('
');
let lyricsArr = [], translate = [];
textArr.forEach((item, index) => {
let time = 0, text = '';
if (item.indexOf('[x-trans]') > -1) {
translate.push(item.split('[x-trans]')[1])
} else if (item.trim() != '') {
time = item.slice(1, 6).split(':');
time = parseInt(time[0]) * 60 + parseInt(time[1]);
text = item.slice(11);
let arr = text.split('>');
let str = arr.reduce((a, b) => {
return a.split('<')[0] + b.split('<')[0]
});
let obj = {
time: time,
text: str
};
lyricsArr.push(obj);
}
});
for (let i in translate) {
lyricsArr[i].text = lyricsArr[i].text + '
' + translate[i];
}
this.currentLyrics = lyricsArr;
},
검색 표시 줄 구현같은 파일 하위 구성 요소 마 운 트
모듈 화 개발 에 따라 검색 표시 줄 을 하위 구성 요소 로 쓰기 로 했 습 니 다.같은 페이지 에 하위 구성 요 소 를 쓰 면 하위 구성 요 소 를 대응 하 는 template 에 마 운 트 하 는 것 이 중요 합 니 다.이 template 는 부모 구성 요소 의 마 운 트 요 소 를 포함 할 수 없습니다.그렇지 않 으 면 부모 구성 요소 가 렌 더 링 할 때 하위 구성 요소 의 데 이 터 를 렌 더 링 할 수 없어 undefined 에 보고 합 니 다.
<div id="app" class="main">
...
</div>
<template id="search-box">
...
</template>
var searchBox = {
template: '#search-box',
props: {
isShow: Boolean,
openFun: Function
},
data(){
return {
resultList: [],
searchValue: '',
}
},
methods: {
}
};
new Vue({
el: '#app',
components: {
'com-tip': tip,
'search-box': searchBox
},
...
})
이벤트 버스 해결 데이터 전송jsonp 를 통 해 데 이 터 를 요청 하려 면 콜백 함 수 를 설정 해 야 합 니 다.이 콜백 은 전역 함수 로 쓰 여 있 습 니 다.이렇게 쓰 지 않 고 searchBox.methods.callback 형식 을 통 해 this 지향 은 methods 입 니 다.searchBox 의 data 에 직접 값 을 부여 할 수 없습니다.그래서 이벤트 버스 를 통 해 처리 하면 유지 하기 쉽다.
var EventBus = new Vue();
var callBack = function(result) {
console.log(result);
EventBus.$emit('callBack', result);
};
...
mounted(){
let self = this;
EventBus.$on('callBack', function(res) {
if (res && res.data) {
self.resultList = res.data.songs;
}
})
}
...
localstrong 노래 정보 저장다음 에 열 면 재생 목록 은 지난번 데 이 터 를 보관 해 야 합 니 다.이것 은 localstrong 으로 직접 실현 할 수 있 습 니 다.
구 덩이 를 밟 았 다
prop 전달 데이터
cdn,vue 의 prop 를 사용 하면 중앙 선 형식 만 지원 하고 낙타 봉 형식 은 유효 하지 않 습 니 다.
ps:웹 팩 으로 포장 한 프로젝트 에 낙타 봉 을 사용 하면 됩 니 다.포장 과정 에서 처리 합 니 다.
//
<search-box :is-show="showSearch" :open-fun="openSearch" @push-song="pushNewSong"
@play-song="playSong"></search-box>
//
<search-box :isShow="showSearch" :openFun="openSearch" @pushSong="pushNewSong"
@playSong="playSong"></search-box>
최 적 화 를 기다리다수 동 으로 진 도 를 수정 하면 가끔 효력 이 발생 하지 않 습 니 다.
검색 은 페이지 를 지원 하지 않 습 니 다.
노래
배경 색상 이 진행 색상 과 비슷 합 니 다.진행 색상 을 수정 해 야 합 니 다.
재생 모드 선택 이 지원 되 지 않 습 니 다.-싱글 순환-랜 덤 재생
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.