MusicKit on the Web #WWDC18. Betim Deva, Engineering Manager, Apple Music DJ Davis, Engineering Manager, Apple Music Jae Hess, Engineer, Apple Music

Transcription

1 #WWDC18 MusicKit on the Web Session 506 Betim Deva, Engineering Manager, Apple Music DJ Davis, Engineering Manager, Apple Music Jae Hess, Engineer, Apple Music 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 MusicKit

3 MusicKit Updates MusicKit on the Web Apple Music Web Player MusicKit JS

4 MusicKit Updates

5 musical.ly

6 Houdini

7 Stationhead

8 Ola

9 ISRC Catalog Lookup Added lookup by ISRC for songs and music videos /v1/catalog/us/songs?filter[isrc]=usum /v1/catalog/us/music-videos?filter[isrc]=usuv

10 icloud Music Library APIs Browse library content by type Search for library content by type Add to a user s music library Create and add to playlists

11 MusicKit Updates MusicKit on the Web Apple Music Web Player MusicKit JS

12 MusicKit on the Web DJ Davis, Engineering Manager, Apple Music

13 MusicKit on the Web

14 MusicKit on the Web Catalog REST API

15 MusicKit on the Web Catalog REST API icloud Music Library REST API

16 MusicKit on the Web Catalog REST API icloud Music Library REST API MusicKit JS

17 MusicKit on the Web Catalog REST API icloud Music Library REST API MusicKit JS Full song playback

18 MusicKit Updates MusicKit on the Web Apple Music Web Player MusicKit JS

19 Apple Music Web Player

20

21 MusicKit Updates MusicKit on the Web Apple Music Web Player MusicKit JS

22 MusicKit JS

23 Functionality

24 Functionality Full song playback

25 Functionality Full song playback Authorize the user

26 Functionality Full song playback Authorize the user Queue of songs

27 Functionality Full song playback Authorize the user Queue of songs Playback controls

28 Functionality Full song playback Authorize the user Queue of songs Playback controls Now playing metadata

29 Building a Simple Player for the Web

30 Building a Simple Player for the Web Include JS Library

31 Building a Simple Player for the Web Include JS Library Provide your developer token

32 Building a Simple Player for the Web Include JS Library Provide your developer token Declarative HTML markup

33 Building a Simple Player for the Web Include JS Library Provide your developer token Declarative HTML markup Add content IDs or URLs

34 <script type="text/javascript" src="

35 <script type="text/javascript" src=" <button data-apple-music-authorize></button> <button data-apple-music-unauthorize></button>

36 <script type="text/javascript" src=" <button data-apple-music-authorize></button> <button data-apple-music-unauthorize></button> <button data-apple-music-play></button> <button data-apple-music-pause></button> <button data-apple-music-skip-to-next-item></button>

37 <script type="text/javascript" src=" <button data-apple-music-authorize></button> <button data-apple-music-unauthorize></button> <button data-apple-music-play></button> <button data-apple-music-pause></button> <button data-apple-music-skip-to-next-item></button> <span data-apple-music-now-playing="playlistname"></span> <span data-apple-music-now-playing="title"></span> <span data-apple-music-now-playing="artistname"></span>

38 <script type="text/javascript" src=" <button data-apple-music-authorize></button> <button data-apple-music-unauthorize></button> <button data-apple-music-play></button> <button data-apple-music-pause></button> <button data-apple-music-skip-to-next-item></button> <span data-apple-music-now-playing="playlistname"></span> <span data-apple-music-now-playing="title"></span> <span data-apple-music-now-playing="artistname"></span> <time data-apple-music-current-playback-duration></time> <time data-apple-music-current-playback-time></time> <span data-apple-music-current-playback-progress></span>

39 Demo Jae Hess, Engineer, Apple Music

40 Advanced Usage

41 Advanced Usage Fetch metadata from catalog by ID

42 Advanced Usage Fetch metadata from catalog by ID Search for content in the catalog

43 Advanced Usage Fetch metadata from catalog by ID Search for content in the catalog icloud Music Library browse and search

44 Advanced Usage Fetch metadata from catalog by ID Search for content in the catalog icloud Music Library browse and search Set and control a queue of songs

45 Advanced Usage Fetch metadata from catalog by ID Search for content in the catalog icloud Music Library browse and search Set and control a queue of songs React to playback events

46 let music = MusicKit.getInstance(); music.api.song(' ').then(callback); // Returns { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, }

47 let music = MusicKit.getInstance(); music.api.song(' ').then(callback); // Returns { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, }

48 let music = MusicKit.getInstance(); music.api.song(' ').then(callback); // Returns { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, }

49 let music = MusicKit.getInstance(); music.api.song(' ').then(callback); // Returns { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, }

50 let music = MusicKit.getInstance(); music.api.songs({ filter: { isrc: 'USQX ' } }); // ISRC // Returns [ { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, } ]

51 let music = MusicKit.getInstance(); music.api.songs({ filter: { isrc: 'USQX ' } }); // ISRC // Returns [ { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, } ]

52 let music = MusicKit.getInstance(); music.api.songs({ filter: { isrc: 'USQX ' } }); // ISRC // Returns [ { id: " ", attributes: { albumname: "Memories...Do Not Open", artistname: "The Chainsmokers" }, relationships: { // artist, album }, } ]

53 music.api.songs([ ' ', ' ' ]); // Returns [ { type: "songs", id: " " }, { type: "songs", id: " " }, ]

54 music.api.songs([ ' ', ' ' ]); // Returns [ { type: "songs", id: " " }, { type: "songs", id: " " }, ]

55 music.api.songs([ ' ', ' ' ]); // Returns [ { type: "songs", id: " " }, { type: "songs", id: " " }, ]

56 // Library Songs music.api.library.songs(); // Library Albums music.api.library.albums(); // Library Playlists music.api.library.playlists();

57 // Library Songs music.api.library.songs(); // Library Albums music.api.library.albums(); // Library Playlists music.api.library.playlists();

58 // Catalog Search music.api.search({ term: 'Westworld', types: 'songs' }); music.api.search({ term: 'Chainsmokers', types: ['songs', 'albums'] });

59 // Catalog Search music.api.search({ term: 'Westworld', types: 'songs' }); music.api.search({ term: 'Chainsmokers', types: ['songs', 'albums'] });

60 // Catalog Search music.api.search({ term: 'Westworld', types: 'songs' }); music.api.search({ term: 'Chainsmokers', types: ['songs', 'albums'] }); // icloud Music Library Search music.api.library.search({ term: 'Westworld', types: 'songs' }); music.api.library.search({ term: 'Chainsmokers', types: ['songs', 'albums'] });

61 // Catalog Search music.api.search({ term: 'Westworld', types: 'songs' }); music.api.search({ term: 'Chainsmokers', types: ['songs', 'albums'] }); // icloud Music Library Search music.api.library.search({ term: 'Westworld', types: 'songs' }); music.api.library.search({ term: 'Chainsmokers', types: ['songs', 'albums'] });

62 // Authorization music.authorize();

63 // Authorization music.authorize();

64 // Playback music.setqueue({ album: ' ' }).then(function() { }); music.play();

65 // Playback music.setqueue({ album: ' ' }).then(function() { }); music.play();

66 // Playback music.setqueue({ album: ' ' }).then(function() { }); music.play();

67 // Playback music.setqueue({ album: ' ' }).then(function() { }); music.play(); // Control music.skiptonextitem(); music.skiptopreviousitem(); music.pause();

68 // Playback music.setqueue({ album: ' ' }).then(function() { }); music.play(); // Control music.skiptonextitem(); music.skiptopreviousitem(); music.pause();

69 // Add to Library music.api.addtolibrary({ songs: [' ', ' '] }); music.api.addtolibrary({ playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'] }); music.api.addtolibrary({ albums: [' '] });

70 // Add to Library music.api.addtolibrary({ songs: [' ', ' '] }); music.api.addtolibrary({ playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'] }); music.api.addtolibrary({ albums: [' '] });

71 // Add to Library music.api.addtolibrary({ songs: [' ', ' '] }); music.api.addtolibrary({ playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'] }); music.api.addtolibrary({ albums: [' '] }); // Batch Add to Library music.api.addtolibrary({ songs: [' ', ' '], playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'], albums: [' '] });

72 // Add to Library music.api.addtolibrary({ songs: [' ', ' '] }); music.api.addtolibrary({ playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'] }); music.api.addtolibrary({ albums: [' '] }); // Batch Add to Library music.api.addtolibrary({ songs: [' ', ' '], playlists: ['pl.6ce2df480c9d4eed81115f9c003ac55c'], albums: [' '] });

73 music.addeventlistener(, function(event) { }); // Handle Event

74 music.addeventlistener(, function(event) { }); // Handle Event

75 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.mediaItemWillChange MusicKit.Events.mediaItemDidChange

76 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.mediaItemWillChange MusicKit.Events.mediaItemDidChange

77 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackStateWillChange MusicKit.Events.playbackStateDidChange MusicKit.PlaybackStates.loading MusicKit.PlaybackStates.playing MusicKit.PlaybackStates.paused

78 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackStateWillChange MusicKit.Events.playbackStateDidChange MusicKit.PlaybackStates.loading MusicKit.PlaybackStates.playing MusicKit.PlaybackStates.paused

79 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackStateWillChange MusicKit.Events.playbackStateDidChange MusicKit.PlaybackStates.loading MusicKit.PlaybackStates.playing MusicKit.PlaybackStates.paused

80 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackProgressWillChange MusicKit.Events.playbackProgressDidChange event.progress

81 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackProgressWillChange MusicKit.Events.playbackProgressDidChange event.progress

82 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.playbackProgressWillChange MusicKit.Events.playbackProgressDidChange event.progress

83 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.mediaPlaybackError

84 music.addeventlistener(, function(event) { }); // Handle Event // Events MusicKit.Events.mediaPlaybackError

85 Demo

86 MusicKit Updates MusicKit on the Web Apple Music Web Player MusicKit JS

87 More Information MusicKit Lab Technology Lab 3 Friday 11:00AM

88