Music is playable
This commit is contained in:
booploops
parent
f6bfa9d088
commit
45623f257b
4 changed files with 91 additions and 16 deletions
|
|
@ -2,6 +2,15 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
|
|
@ -28,7 +37,8 @@
|
|||
<button class="playback-button previous"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button play"></button>
|
||||
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
|
||||
<button class="playback-button play" @click="mk.play()" v-else></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next"></button>
|
||||
|
|
@ -39,22 +49,32 @@
|
|||
</div>
|
||||
<div class="app-chrome--center">
|
||||
<div class="app-chrome-item playback-controls">
|
||||
<div class="app-playback-controls">
|
||||
<div class="artwork"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">Song Name</div>
|
||||
<div class="song-artist">Artist - Album</div>
|
||||
<div class="song-progress">
|
||||
<input type="range" step="0.01" min="0" max="1500">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls">
|
||||
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist">
|
||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
|
||||
</div>
|
||||
<div class="song-progress">
|
||||
<input type="range" step="0.01" min="0"
|
||||
@change="mk.seekToTime($event.target.value)"
|
||||
:max="mk.currentPlaybackDuration"
|
||||
:value="mk.currentPlaybackProgress * 100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">❤️</div>
|
||||
</div>
|
||||
<div class="actions">❤️</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome--right">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<input type="range" class="">
|
||||
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small">
|
||||
|
|
@ -122,6 +142,15 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button></div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||
|
|
@ -151,6 +180,7 @@
|
|||
</div>
|
||||
<div class="bg-artwork"></div>
|
||||
</div>
|
||||
<script src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
|
||||
<script src="index.js?v=1"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,50 @@
|
|||
var app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
drawertest: false
|
||||
drawertest: false,
|
||||
mk: {},
|
||||
quickPlayQuery: ""
|
||||
},
|
||||
methods: {
|
||||
|
||||
init() {
|
||||
this.mk = MusicKit.getInstance()
|
||||
this.$forceUpdate()
|
||||
},
|
||||
mkReady() {
|
||||
if(this.mk["nowPlayingItem"]) {
|
||||
return true
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
},
|
||||
getNowPlayingArtwork(size = 600) {
|
||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
quickPlay(query) {
|
||||
let self = this
|
||||
MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) {
|
||||
MusicKit.getInstance().setQueue({ song: data["songs"]['data'][0]["id"] }).then(function (queue) {
|
||||
MusicKit.getInstance().play()
|
||||
setTimeout(()=>{
|
||||
self.$forceUpdate()
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
document.addEventListener('musickitloaded', function() {
|
||||
// MusicKit global is now defined
|
||||
MusicKit.configure({
|
||||
developerToken: '',
|
||||
app: {
|
||||
name: 'My Cool Web App',
|
||||
build: '1978.4.1'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -538,7 +538,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: url("artwork.jpeg");
|
||||
background-image: var(--artwork);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -13,10 +13,14 @@ const CiderWin = {
|
|||
vibrancy: 'dark',
|
||||
hasShadow: false,
|
||||
webPreferences: {
|
||||
plugins: true,
|
||||
nodeIntegration: true,
|
||||
webSecurity: false,
|
||||
nodeIntegrationInWorker: false,
|
||||
webSecurity: true,
|
||||
allowRunningInsecureContent: true,
|
||||
enableRemoteModule: true,
|
||||
sandbox: true,
|
||||
nativeWindowOpen: true
|
||||
}
|
||||
}
|
||||
if (process.platform === "darwin" || process.platform === "linux") {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue