This time I will bring you JS to implement the music player interface. What are the precautions for JS to implement the music player interface? The following is a practical case, let's take a look.
This article introduces an example of implementing a music player on a vue page and shares it with everyone. The details are as follows:
The effect is as follows:
Project address: https://github.com/ermu592275254/MiniMusicPlayer
Demo address: https://ermu592275254.github.io/MiniMusicPlayer/(song link has expired)
Conception before development
Interface
To be a music player, the interface must be cool. It's so low that I don't feel anything when listening to the music. It is intended to be used at work, so I made an interface similar to NetEase Cloud Music with a suitable size. No need to be compatible with mobile phones.
Use css to make icons
This paper considers simple and practical needs. The icons can be SVG, url or css. Compared to url, SVG and css are better. For the sake of practice, I finally chose css. Making good use of after and before can reduce a lot of DOM nesting.
.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;
}draw a record
NetEase Cloud’s record is very beautiful, I want to make a record too! With good use of box-shadow, one element can be made into a beautiful record record effect.
.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;
}Use range to make progress bar
The style of audio itself is ugly, and the effects presented by different browsers are also different. Of course, you can modify the style of audio. The traditional method is to hide audio through the controls attribute, and then use p instead. Now is the HTML5 era. Of course, we must use a new element that is more suitable for the scene——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);
}Background filter blur
It feels great to set the picture as the background. It can be said that the background provides half of the appearance of the entire player. The setting is also very simple, using css3 filters.
.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;
}The background image is controlled through js.
<p class="bg-blur" :style="`background-image:url(${currentSong.album_logo})`"></p>Song resources
Climb down the interface
Go directly to the Xiami official website to open the network and copy the url to postman Make requests. By modifying the headers, it is found that the Referer will be verified. In other words, only domain names allowed by Xiami can access this interface. http://api.xiami.com/web?v=2.0&app_key=1&key=aliez&page=1&limit=5&callback=jsonp154&r=search/songs
solve cross-domain issues
Because the interface supports jsonp. At first, I tried to set the chrome browser to cross domain, and then made a jsonp request through $.ajax. Can be accessed normally.
It suddenly stopped working. Did Xiami impose restrictions?
So I used node to start a service, fake the referer to initiate a request, and then forward the request to the page. I accidentally wrote an agent.
...
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;
...Lyrics scrolling
As a high-quality player, lyrics scrolling is a must.
Principle
Save each lyric as an object with corresponding time. When the current duration of the song is greater than or equal to the time of the lyrics and less than the time of the next line of the lyrics, then scroll the lyrics to the visual area. And change the font color.
Formatted Lyrics
The lyrics returned by the interface were confusing. After careful study, I found that they were regular.
[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>決<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('\n');
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 + '\n' + translate[i];
}
this.currentLyrics = lyricsArr;
},Search bar implementation
Subcomponent mounting under the same file
In order to follow modular development, it was decided to add the search bar Written as a subcomponent. When writing subcomponents on the same page, it is important to mount the subcomponents to the corresponding template. This template cannot be included by the mounting element of the parent component, otherwise the parent component will report undefined because it cannot render the data in the child component.
<p id="app" class="main">
...
</p>
<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
},
...
})eventBus solves data transmission
通过jsonp去请求数据，需要设置一个callback函数，此callback写成一个全局函数，如果不这样写，而是通过 searchBox.methods.callback的形式，this指向将为methods。而无法直接给searchBox的data赋值。 于是通过eventBus来处理，这样更易维护。
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: 在用webpack打包的项目中用驼峰是可以，在打包过程中，会做处理。
// 正确写法
<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>待优化
手动修改进度，偶尔会不生效。
搜索暂不支持分页
不支持建歌单
背景颜色与进度条颜色相近需修改进度条颜色
不支持播放模式选择-单曲循环-随机播放
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
The above is the detailed content of JS implements music player interface. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
