Flutter音乐播放插件spotify_sdk的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

Flutter音乐播放插件spotify_sdk的使用

描述

spotify_sdk 是一个Flutter包,它封装了原生的 iOSAndroid Spotify “remote” SDKs 以及用于Web端的 Spotify Web Playback SDK。因此,它具有与原生SDK相同的功能和限制。

安装

Android

此包使用了 spotify-app-remote SDK 和 spotify-auth 库。auth 库用于获取访问令牌以操作Web API。

快速设置步骤:

  1. Spotify开发者门户注册你的应用,并创建一个SHA-1指纹,将其和包名添加到应用设置中,同时还需要添加一个重定向URL。
  2. 根据下面提供的两种选项进行设置:
    • Option A: 自动设置:使用提供的脚本自动下载最新的spotify-app-remote SDK并设置Gradle文件。
      dart run spotify_sdk:android_setup
      
    • Option B: 手动设置(适用于Android Studio 4.2+):请参考官方文档中的说明。

iOS

Spotify开发者门户注册你的应用,并注册Bundle ID及Redirect URI。然后按照快速开始指南中的指示完成设置。

Web

  1. 注册应用并提供一个指向你拥有网站上的特定页面的重定向URL。
  2. 将以下代码粘贴到该网页上:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Authenticating Spotify</title>
      </head>
      <body>
        <p>Please wait while we authenticate Spotify...</p>
        <script type="text/javascript">
          if(window.opener) {
            window.opener.postMessage('?' + window.location.href.split('?')[1], "*");
          } else {
            window.close();
          }
        </script>
      </body>
    </html>
    
  3. 可选地,在Flutter应用的web/index.html中添加以下内容以避免开发模式下的JavaScript错误:
    <script src="https://sdk.scdn.co/spotify-player.js"></script>
    <script>
      window.onSpotifyWebPlaybackSDKReady = (evt) => {};
    </script>
    

注意:使用Web SDK需要Spotify Premium账户。

使用方法

首先,在Dart文件中导入此包:

import 'package:spotify_sdk/spotify_sdk.dart';

连接到Spotify应用程序可以通过调用connectToSpotifyRemote(...)getAccessToken(...)来实现。在这两个方法中,你需要提供从Spotify开发者仪表板获得的客户端ID和为该特定客户端设置的重定向URL。

await SpotifySdk.connectToSpotifyRemote(clientId: "", redirectUrl: "");

成功连接后可以订阅PlayerStatePlayerContext流。

SpotifySdk.subscribePlayerState();
SpotifySdk.subscribePlayerContext();

如果想要使用Web API,可以使用以下方法获取访问令牌:

final accessToken = await SpotifySdk.getAccessToken(
    clientId: "", 
    redirectUrl: "", 
    scope: "app-remote-control,user-modify-playback-state,playlist-read-private"
);

更多功能和API,请参考官方文档或查看示例代码

示例Demo

下面是一个完整的示例demo,展示了如何使用spotify_sdk包来构建一个简单的Spotify控制器界面。

// 省略了部分非关键代码...

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  HomeState createState() => HomeState();
}

class HomeState extends State<Home> {
  bool _loading = false;
  bool _connected = false;

  // ...其他成员变量和构造函数...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: StreamBuilder<ConnectionStatus>(
        stream: SpotifySdk.subscribeConnectionStatus(),
        builder: (context, snapshot) {
          _connected = snapshot.data?.connected ?? false;
          return Scaffold(
            appBar: AppBar(
              title: const Text('SpotifySdk Example'),
              actions: [
                if (_connected)
                  IconButton(
                    onPressed: disconnect,
                    icon: const Icon(Icons.exit_to_app),
                  ),
              ],
            ),
            body: _sampleFlowWidget(context),
            bottomNavigationBar: _connected ? _buildBottomBar(context) : null,
          );
        },
      ),
    );
  }

  // ...其他方法...

  Future<void> connectToSpotifyRemote() async {
    try {
      setState(() {
        _loading = true;
      });
      var result = await SpotifySdk.connectToSpotifyRemote(
          clientId: dotenv.env['CLIENT_ID'].toString(),
          redirectUrl: dotenv.env['REDIRECT_URL'].toString());
      setStatus(result
          ? 'connect to spotify successful'
          : 'connect to spotify failed');
      setState(() {
        _loading = false;
      });
    } catch (e) {
      setState(() {
        _loading = false;
      });
      setStatus(e.toString());
    }
  }

  // ...其他方法...
}

这个例子包含了连接、断开连接、获取播放状态等功能,以及一些UI组件来展示当前播放信息和控制播放器。你可以根据自己的需求进一步扩展和完善这个基础框架。


更多关于Flutter音乐播放插件spotify_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音乐播放插件spotify_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用spotify_sdk插件进行音乐播放的示例代码。请注意,这个插件的具体实现可能会依赖于其最新版本和API变化,因此请参考官方文档进行最新的实现细节。

首先,确保你已经在pubspec.yaml文件中添加了spotify_sdk依赖:

dependencies:
  flutter:
    sdk: flutter
  spotify_sdk: ^最新版本号  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来,你需要在Android和iOS项目中配置Spotify SDK。这通常涉及到在各自的平台上添加SDK密钥和必要的配置。

Android配置

  1. android/app/src/main/AndroidManifest.xml中添加必要的权限和配置:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

    <application
        ... >
        <meta-data
            android:name="com.spotify.sdk.android.ClientId"
            android:value="你的Spotify客户端ID" />
        <meta-data
            android:name="com.spotify.sdk.android.RedirectUri"
            android:value="你的重定向URI" />
        ...
    </application>

    <uses-permission android:name="android.permission.INTERNET" />
</manifest>
  1. android/build.gradle文件中,确保你已经在项目的repositories块中添加了jcenter()mavenCentral()(取决于Spotify SDK的依赖源)。

iOS配置

  1. ios/Runner/Info.plist中添加必要的配置:
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>你的Spotify客户端ID</string>
        </array>
    </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>spotify</string>
</array>
  1. ios/Runner/AppDelegate.swift中,添加必要的代码以处理Spotify回调(如果使用Swift):
import UIKit
import Flutter
import SpotifyAuth

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    // Spotify SDK setup
    let spotifyClientID = "你的Spotify客户端ID"
    let spotifyRedirectURL = URL(string: "你的重定向URI")!
    
    SPTAuth.defaultInstance().clientID = spotifyClientID
    SPTAuth.defaultInstance().redirectURL = spotifyRedirectURL
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
  
  override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if SPTAuth.defaultInstance().handleAuthCallback(with: url, options: options) {
      // Handle successful authentication
      return true
    }
    return super.application(app, open: url, options: options)
  }
}

Flutter代码实现

在你的Flutter项目中,你可以这样使用spotify_sdk插件:

import 'package:flutter/material.dart';
import 'package:spotify_sdk/spotify_sdk.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SpotifyScreen(),
    );
  }
}

class SpotifyScreen extends StatefulWidget {
  @override
  _SpotifyScreenState createState() => _SpotifyScreenState();
}

class _SpotifyScreenState extends State<SpotifyScreen> {
  final Spotify _spotify = Spotify();

  @override
  void initState() {
    super.initState();
    // Initialize Spotify SDK and authenticate
    _authenticateSpotify();
  }

  Future<void> _authenticateSpotify() async {
    try {
      final SpotifyAuthResult result = await _spotify.authenticate(
        clientId: "你的Spotify客户端ID",
        redirectUri: "你的重定向URI",
        scopes: ["streaming", "user-read-private", "user-read-email"],
      );

      if (result.accessToken != null) {
        // Successfully authenticated, you can now use the Spotify SDK
        print("Spotify Access Token: ${result.accessToken}");
      } else {
        // Handle authentication failure
        print("Authentication failed: ${result.error}");
      }
    } catch (e) {
      print("Error during Spotify authentication: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Spotify SDK Demo'),
      ),
      body: Center(
        child: Text('Authenticating with Spotify...'),
      ),
    );
  }
}

请注意,上述代码只是一个基本示例,用于展示如何初始化Spotify SDK并进行身份验证。实际上,你可能需要更多的逻辑来处理身份验证后的操作,比如播放音乐、获取用户信息等。

务必参考spotify_sdk插件的官方文档和Spotify开发者文档,以获取最新的API信息和最佳实践。

回到顶部