Clova Skill 에서 AudioPlayer 구현

Clova Skill에서 Audio
Player
구현
Clova Platform
Evangelist
옥상훈
2019-02-28

목차
• AudioPlayer 개요
• AudioPlayer의 이해
• 적용 데모
• AudioPlayer 관련 기술 스펙
• AudioPlayer 인터페이스
• PlaybackController 인터페이스
• TemplateRuntime 인터페이스
• AudioPlayer 스킬 개발
• 메타 데이터 준비
• 오디오 재생 처리 (AudioPlayer)
• 오디오 컨트롤 처리 (PlaybackController)
• 메타 데이터 처리 (TemplateRuntime &
EventRequest 요청 처리)
• 기타 개발 팁
• 스킬 심사시 주의 사항

AudioPlayer의 이해
• 목적
• 커스텀 스킬을 통해 음악 또는 podcast 등을 재생
• Clova 앱, 디스플레이형 클로바 스피커에서 오디오 컨트롤러 표시 및 재생 지원
• 사용자가 오디오 컨트롤러 조작시 화면표시에 필요한 메타 정보 전달
• outputSpeech와 차이
• outputSpeech의 url에 음원을 설정하여 음원 재생은 가능
• 오디오 컨트롤러 표시 불가
• 주로 효과음 재생에 활용 가능

AudioPlayer 적용 데모
음원 아이콘, 음원제목, 출처, 제작자 아이콘, 오디오 컨트롤 버튼 표시 앨범 이미지, 재생목록 표시

AudioPlayer 관련 기술 스펙

AudioPlayer 인터페이스
• 개요
• 클라이언트(클로바가 탑재된 디바이스나 클로바앱) 에게
오디오 재생 및 관련 작업을 지시
• 오디오 재생중 발생하는 다양한 이벤트를 CIC
(클로바 플
랫폼)으로 전달할 때 사용하는 네임스페이스
• 구성
• Directive:
Play,
ClearQueue,
ExpectReportPlaybackState,
StreamDeliver
• Event:
StreamRequested,
PlayStarted,
PlayStopped,
PlayFinished,
PlayPaused,
PlayResumed 등
* 개발 문서 : https://developers.naver.com/console/clova/guide/CIC/References/CICInterface/AudioPlayer.md#audioplayer
예) 커스텀 스킬에서 오디오 재생 지시

PlaybackController 인터페이스
• 개요
오디오 재생 및 출력 제어
• 음소거, 다음곡 재생, 음원 일시정지, 다시 재생, 정지
등의 동작 제어 등
• 구성
• Directive:
Next, Previous, Pause, Resume, Stop 등
• Event:
PlayCommandIssued, PreviousCommandIssued,
NextCommandIssued 등
* 개발 문서 : https://developers.naver.com/console/clova/guide/CIC/References/CICInterface/PlaybackController.md#playbackcontroller
예) 커스텀 스킬에서 PlaybackController 지시

TemplateRuntime 인터페이스
• 개요
오디오 메타 정보 전달
• 음원 아이콘, 음원제목, 출처, 제작자 아이콘, 오디오 컨트
롤 버튼 표시
• 앨범 이미지, 재생목록 표시
• 사용자로부터의 메타정보 요청 이벤트 정의
• 구성
• Directive:
RenderPlayerInfo 등
• Event:
RequestPlayerInfo 등
* 개발 문서 : https://developers.naver.com/console/clova/guide/CIC/References/CICInterface/TemplateRuntime.md#templateruntime
예) 커스텀 스킬에서 TemplateRuntime 지시

EventRequest 요청
• 개요
• 클라이언트의 상태 변화나 그와 관련된 부수적인 요청을 extension에 전달해야 할 때 사
용되는 요청 타입
• 클라이언트의 오디오 재생 상태에 따른 작업 처리
• 종류
• AudioPlayer.PlayFinished
• AudioPlayer.PlayPaused
• AudioPlayer.PlayResumed
• AudioPlayer.PlayStarted
• AudioPlayer.PlayStopped
• AudioPlayer.ProgressReportDelayPassed
• AudioPlayer.ProgressReportIntervalPassed
• AudioPlayer.ProgressReportPositionPassed
• AudioPlayer.StreamRequested
• TemplateRuntime.RequestPlayerInfo
* 개발 문서 : https://developers.naver.com/console/clova/guide/CEK/References/CEK_API.md#CustomExtEventRequest

오디오 메타 데이터 준비
• 메타데이터 구성
• audioItemId (token)
:
오디오 아이템 마다 유일한 문자열 값
• titleText:
음원이름
• logoUrl:
제작자 아이콘
• artImageUrl :
음원 아이콘 및 앨범 자켓
• titleSubText1 : 출처
• headerText : 재생목록 제목
• stream : 음원 링크
• 예) node.js 코드 일부
• 메타 데이터 처리
• 클로바에게 재생 목록 전달
• 현재 재생중인 목록 인덱스 관리
• 이전곡 다음곡 요청시 처리시 음원 정보 전달

스킬 요청 처리
• 커스텀 스킬 요청에 따라 분기 처리
• 예) node.js 코드 일부

오디오 재생 처리 - AudioPlayer
• LaunchRequest 에서 AudioPlayer 디렉티브 전송
{
"response": {
"directives": [
{
"header": {
"messageId": "47fbba58-4a45-4001-a4fc-c0a6514c356c",
"name": "Play",
"namespace": "AudioPlayer"
},
"payload": {
"audioItem": {
"audioItemId": "e6fb57a5-ee48-4d84-8320-03a76a075fa7",
"stream": {
"beginAtInMilliseconds": 0,
"playType": "NONE",
"progressReport": {
"progressReportDelayInMilliseconds": null,
"progressReportIntervalInMilliseconds": 60000,
"progressReportPositionInMilliseconds": null
},
"token": "e6fb57a5-ee48-4d84-8320-03a76a075fa7",
"url": "http://static.naver.net/clova/service/native_extensions/sound_serise/rainning_sound.mp3",
"urlPlayable": true
},
"type": "custom"
},
"playBehavior": "REPLACE_ALL",
"provider": {
"artImageUrl": "http://static.naver.net/clova/service/native_extensions/sound_serise/img_sound_rain_108.png",
"logoUrl": "https://phinf.pstatic.net/contact/42/2016/6/1/okgosu_1464774184074.jpg?type=s160",
"name": "빗소리",
"smallLogoUrl": "https://phinf.pstatic.net/contact/42/2016/6/1/okgosu_1464774184074.jpg?type=s160"
},
"source": {
"logoUrl": "https://phinf.pstatic.net/contact/42/2016/6/1/okgosu_1464774184074.jpg?type=s160",
"name": "빗소리"
}
}
}
],
"outputSpeech": {
"type": "SpeechList",
"values": [
{
"lang": "ko",
"type": "PlainText",
"value": "1 번째 테스트입니다. 빗소리를 재생합니다. "
}
]
},
"reprompt": {
"outputSpeech": null
},
"shouldEndSession": true
},
"sessionAttributes": {},
"version": "1.0"
}

오디오 메타 데이터 전송 처리 - TemplateRuntime
• EventRequest에서 type이 RequestPlayerInfo일 경우 TemplateRuntime에 메타 데이터 전송
{
"response": {
"directives": [
{
"header": {
"messageId": "04b8798c-c1c2-4563-b94e-97632ec162cf",
"name": "RenderPlayerInfo",
"namespace": "TemplateRuntime"
},
"payload": {
"controls": [
{
"enabled": true,
"name": "PLAY_PAUSE",
"selected": false,
"type": "BUTTON"
},
{
"enabled": true,
"name": "NEXT",
"selected": false,
"type": "BUTTON"
},
{
"enabled": true,
"name": "PREVIOUS",
"selected": false,
"type": "BUTTON"
}
],
"displayType": "single",
"playableItems": [
{
"headerText": "잡소리 스킬 재생 목록",
"stream": "http://static.naver.net/clova/service/native_extensions/sound_serise/rainning_sound.mp3",
"titleSubText1": "[출처] 잡소리 스킬",
"titleText": "빗소리",
"token": "00ea5bdc-2a98-4422-8c37-ea761b70f973"
},
{
"artImageUrl":
"http://static.naver.net/clova/service/native_extensions/sound_serise/img_sound_wave_108.png",
"stream":
"http://static.naver.net/clova/service/native_extensions/sound_serise/wave_sound.mp3",
"titleText": "파도소리",
"token": "b65a710a-3b1f-4c58-bd7a-20e3aed5e87d"
},
{
"artImageUrl":
"http://static.naver.net/clova/service/native_extensions/sound_serise/img_sound_cafe_108.png",
"stream":
"http://static.naver.net/clova/service/native_extensions/sound_serise/cafe_sound.mp3",
"titleText": "카페소리",
"token": "d95e9372-ee38-4927-85c1-ec9998297abe"
}
],
"playerId": "1a6bf34e-49ab-447b-a0f8-1a647b3bded6",
"provider": {
"artImageUrl":
"http://static.naver.net/clova/service/native_extensions/sound_serise/img_sound_rain_108.png",
"logoUrl":
"https://phinf.pstatic.net/contact/42/2016/6/1/okgosu_1464774184074.jpg?type=s160",
"name": "빗소리",
"smallLogoUrl":
"https://phinf.pstatic.net/contact/42/2016/6/1/okgosu_1464774184074.jpg?type=s160"
}
}
}
],
"outputSpeech": {},
"reprompt": {
},
},
"version": "1.0"
}

오디오 컨트롤러 처리
• EventRequest에서 type이 음원 컨트롤 관련일 경우 PlaybackController 디렉티브 전송
{
"response": {
"directives": [
{
"header": {
"messageId": "b82bfa40-64a7-4186-9e6b-c0d7c7e288be",
"name": "Pause",
"namespace": "PlaybackController"
},
"payload": {}
}
],
"outputSpeech": {
"type": "SpeechList",
"values": [
{
"lang": "ko",
"type": "PlainText",
"value": "음원을 일시 중지 합니다."
}
]
},
"reprompt": {
},
},
"version": "1.0"
}
예: PlayPaused)

재생중인 곡명 처리
• 현재 재생중인 곡 정보
• 스킬 내에 별도의 인텐트를 만들고 인텐트가 들어왔을 때 재생중인 곡의 정보를 리턴하도록 처리
• 예) 잡소리에게 현재 노래 제목 확인해줘

오디오플레이어 적용 스킬 데모 예제
• https://github.com/okgosu/CEK-CloudFunction-
Exam/blob/master/CEK_rain.js

스킬 심사 요청시 주의 사항
• Extension
정보의 “오디오 플레이어 사용” 항목에 “예”로 체크
• 오디오 플레이어를 적용한 스킬의 경우 아래 사항 테스트 필수
• 클로바앱에서 오디오 컨트롤러 표시 여부
• 오디오 컨트롤러 조작 가능 여부(정지, 재생, 일시정지, 이전곡, 다음곡 등)
• 음성으로 일시정지, 재생, 이전곡, 다음곡 가능 여부 확인

Appendix.
• Clova 발표자료: https://www.slideshare.net/clovaplatform
• Clova 강의 동영상: https://www.youtube.com/watch?v=sOW-
YwR_YWw&list=PLq8dHmDf5DDWRN4VWkc0QrBlsEsbs3QwC
• Clova Dev
Days
행사 알림 챗봇: https://talk.naver.com/ct/wcdkve
• Clova 플랫폼 개발자 문서 :
https://developers.naver.com/console/clova/guide/
• Design
챕터 /
Clova Extensions
Kit
챕터 /
Clova Developer
Console
챕터 참고
• 튜토리얼 및 샘플 코드 참고
• 샘플 코드 Github
• 마법 구슬 :
https://github.com/naver/clova-extension-sample-magicball
• 빗소리 :
https://github.com/naver/clova-extension-sample-rainsound
• 주사위 놀이 :
https://github.com/naver/clova-extension-sample-dice
• 코인 헬퍼 :
https://github.com/naver/clova-extension-sample-coinhelper

Thank
you.
제휴문의: dl_clova_partnership@navercorp.com

Clova Skill 에서 AudioPlayer 구현

Recommended

Recommended

More Related Content

More from Clova Platform

More from Clova Platform (20)

Clova Skill 에서 AudioPlayer 구현