在 Soda CMS 上构建的甜美 Spotify 套件

1.1.3 2018-08-20 05:35 UTC

README

为 Made in Katana 定制的甜美 Spotify 平台

##安装

  1. 首先,按照说明在: https://github.com/soda-framework/cms 安装 Soda CMS

  2. 安装 Soda Spotify

#!json
composer require soda-framework/spotify
  1. 使用 NPM 安装这些包。这些是编译此包中的 Vue 组件所必需的。
"vue-template-es2015-compiler": "1.3.1",
"vue": "^2.1.10",
"vue-template-compiler": "^2.1.10"
"axios": ""
  1. 通过在 /config/app.php 中的 providers 数组中添加 Soda\Spotify\Providers\SpotifyServiceProvider::class 将 Soda Spotify 集成到 laravel 中
    'providers' => [
        Soda\Providers\SodaServiceProvider::class,
        Soda\Spotify\Providers\SpotifyServiceProvider::class,
    ]
  1. 运行数据库迁移 php artisan migrate 以生成必要的表。

  2. 在 CMS 中,转到 Spotify > 设置选项卡,并指定每个创建的播放列表应使用的 操作。您还可以指定用户账户上创建的播放列表的播放列表标题和播放列表图片(可选)。

##用法

###保存播放列表 包含此文件以创建一个链接,该链接将在用户账户上创建一个播放列表。

#!php
@include('soda-spotify::save',compact('playlist'))

或者,您可以传递自定义文本/视图/HTML 以显示。

#!php
@include('soda-spotify::save',['playlist'=>$playlist, 'save_text'=>'Save Playlist', 'saved_text'=>'Playlist Saved'])

您可以通过转到 Spotify > 设置选项卡并在 CMS 中编辑播放列表标题和播放列表图片(可选)来指定创建的播放列表将具有的标题和图片。

此操作将带他们去 Spotify 并登录。他们将被发送回带有 present 的 /playlist/ID 页面。

#!php
$_GET['from_spotify']

如果此参数存在,并且播放列表尚未作为已添加的(会话)列出,则它将在将他们发送回网站上的播放列表之前将播放列表添加到用户的账户中。

###曲目 您需要在您的 Javascript 中使用 Vue 包含曲目组件。例如:

#!js
var Vue = require('vue');
var Tracks = require('../../../../../vendor/mik/spotify/resources/js/Components/Tracks.vue'); // path to the Tracks component
require('../vueConfig.js');

if( $('#playlist').length ) {
    var playlist_vm = new Vue({
        el: '#playlist',
        data: {
            token: document.head.querySelector("[name=csrf-token]").content,
        },
        created: function(){
            var me = this;
        },
        methods: {

        },
        components: {
            Tracks
        }
    });
}

显示播放器界面

#!php
@include('soda-spotify::tracks',compact('playlist'))

或者,您可以通过传递自定义文本作为标题。例如:

#!php
@include('soda-spotify::tracks',['playlist'=>$playlist, 'title'=>'Now Playing'])

#路由 ###保存播放列表

#!php
route('spotify.login',['url'=>URL_TO_RETURN_AFTER_LOGIN])

###获取播放列表曲目

#!php
route('spotify.api.tracks',['id'=>PLAYLIST_ID])

响应 Screen Shot 2017-02-01 at 11.55.19 am.png

###存储曲目数据

###曲目需要以以下结构存储在数据库中的 JSON 中

#!json

[{
    "id": "12D0n7hKpPcjuUpcbAKjjr",
    "name": "Don't Like.1",
    "preview_url": "https:\/\/p.scdn.co\/mp3-preview\/fef716a78bda6c3ce06f3a7b12d4ad5e47035984?cid=da37dbff0615468591361d57d2118b05",
    "uri": "spotify:track:12D0n7hKpPcjuUpcbAKjjr",
    "url": "https:\/\/open.spotify.com\/track\/12D0n7hKpPcjuUpcbAKjjr",
    "artists": [{
        "id": "5K4W6rqBFWDnAN6FQUkS6x",
        "name": "Kanye West",
        "uri": "spotify:artist:5K4W6rqBFWDnAN6FQUkS6x",
        "url": "https:\/\/open.spotify.com\/artist\/5K4W6rqBFWDnAN6FQUkS6x"
    }, {
        "id": "15iVAtD3s3FsQR4w1v6M0P",
        "name": "Chief Keef",
        "uri": "spotify:artist:15iVAtD3s3FsQR4w1v6M0P",
        "url": "https:\/\/open.spotify.com\/artist\/15iVAtD3s3FsQR4w1v6M0P"
    }],
}]

有一个函数可以将 Spotify 创建的曲目 JSON 数组转换为该格式

#!php
Soda\Spotify\Components\Helpers::reduceResults($tracks); // $tracks is an array of Spotify Created track objects

###创建播放列表

#!php
$playlist = \Soda\Spotify\Controllers\PlaylistController::create_seeded_playlist($seeds);

$seeds 是定义在 https://developer.spotify.com/web-api/get-recommendations/ 中的种子数组。

例如:

#!php
$seeds = [
    'target_valence'=>0.5,
    'seed_tracks'=>ARRAY_OF_SPOTIFY_TRACK_IDS
];

重要:您必须具有 seed_genresseed_tracksseed_artists 中的任何一个。