音频播放服务 ESAudioPlayerService
简介
通用音频播放服务。封装了音频播放常用功能
ESAudioPlayerService
实现了ESIPlayer
接口。
ESAudioPlayerService
和ESIPlayer
有相同的数据结构,事件,接口,属性。
基础用法
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<es-audio-service-player
ref="player"
:player-width="playerWidth"
:player-height="playerHeight"
@onPlayerInitialized="onPlayerInitialized"
class="es-audio-player-page-css"/>
<s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
<div class="es-sdk-content-divider-css"/>
<div class="es-sdk-content-row-css">
<s-text-button text="播放" @onButtonClicked="onPlayButtonClicked"/>
<s-text-button text="开始" @onButtonClicked="onStartButtonClicked"/>
<s-text-button text="暂停" @onButtonClicked="onPauseButtonClicked"/>
<s-text-button text="停止" @onButtonClicked="onStopButtonClicked"/>
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {useESLog} from "@extscreen/es3-core";
import {ref} from "vue";
import {ESIPlayer, ESMediaSource, ESMediaSourceList, ESPlayerPosition} from "@extscreen/es3-player";
import {useESRouter} from "@extscreen/es3-router";
import {ESAudioServicePlayer} from "@extscreen/es3-audio-service-player";
const TAG = 'ESAudioPlayerPage'
export default defineComponent({
name: '使用初探',
components: {
'es-audio-service-player': ESAudioServicePlayer,
},
setup(props, context) {
const log = useESLog()
const router = useESRouter()
const player = ref<ESIPlayer>()
const playerWidth = 1920
const playerHeight = 1080
const onESCreate = (params) => {
log.e(TAG, "-------onESCreate------start---->>>>>")
}
const onPlayerInitialized = (playerType) => {
log.e(TAG, "-------onESCreate------onPlayerInitialized---->>>>>")
let mediaSource: ESMediaSource = {
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3'
}
let position: ESPlayerPosition = {
support: true,
position: 20000
}
let mediaSourceList: ESMediaSourceList = {
index: 0,
list: [mediaSource],
position: position
}
log.e(TAG, "-------onPlayerInitialized---------->>>>>", playerType)
player.value?.playMediaSourceList(mediaSourceList)
}
const onPlayButtonClicked = () => {
player.value?.initialize()
}
const onStartButtonClicked = () => {
player.value?.start(50000)
}
const onPauseButtonClicked = () => {
player.value?.pause()
}
const onStopButtonClicked = () => {
player.value?.stop()
}
function onBackPressed() {
router.back()
}
return {
onESCreate,
onPlayerInitialized,
playerWidth,
playerHeight,
player,
onBackPressed,
onPlayButtonClicked,
onStartButtonClicked,
onPauseButtonClicked,
onStopButtonClicked
}
},
});
</script>
<style>
.es-audio-player-page-css {
position: absolute;
}
</style>
监听播放事件
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<es-audio-service-player
ref="videoPlayer"
:player-width="playerWidth"
:player-height="playerHeight"
@onPlayerLazyInitSuccess="onPlayerLazyInitSuccess"
@onPlayerLazyInitError="onPlayerLazyInitError"
@onPlayerInitialized="onPlayerInitialized"
@onPlayerPlayMediaSourceList="onPlayerPlayMediaSourceList"
@onPlayerPlayMediaSource="onPlayerPlayMediaSource"
@onPlayerInterceptSuccess="onPlayerInterceptSuccess"
@onPlayerInterceptError="onPlayerInterceptError"
@onPlayerError="onPlayerError"
@onPlayerNoMediaSourceCanPlay="onPlayerNoMediaSourceCanPlay"
@onPlayerSizeChanged="onPlayerSizeChanged"
@onPlayerClickable="onPlayerClickable"
@onPlayerViewChanged="onPlayerViewChanged"
@onPlayerPreparing="onPlayerPreparing"
@onPlayerPrepared="onPlayerPrepared"
@onPlayerPlaying="onPlayerPlaying"
@onPlayerPaused="onPlayerPaused"
@onPlayerResumed="onPlayerResumed"
@onPlayerStopped="onPlayerStopped"
@onPlayerCompleted="onPlayerCompleted"
@onPlayerBufferStart="onPlayerBufferStart"
@onPlayerBufferEnd="onPlayerBufferEnd"
@onPlayerSeekStart="onPlayerSeekStart"
@onPlayerSeekCompleted="onPlayerSeekCompleted"
@onPlayerLeftVolumeChanged="onPlayerLeftVolumeChanged"
@onPlayerRightVolumeChanged="onPlayerRightVolumeChanged"
@onPlayerVolumeChanged="onPlayerVolumeChanged"
@onPlayerDecodeListChanged="onPlayerDecodeListChanged"
@onPlayerDecodeChanged="onPlayerDecodeChanged"
@onPlayerPlayRateListChanged="onPlayerPlayRateListChanged"
@onPlayerPlayRateChanged="onPlayerPlayRateChanged"
@onPlayerAspectRatioListChanged="onPlayerAspectRatioListChanged"
@onPlayerAspectRatioChanged="onPlayerAspectRatioChanged"
@onPlayerDefinitionListChanged="onPlayerDefinitionListChanged"
@onPlayerDefinitionChanged="onPlayerDefinitionChanged"
@onPlayerInfo="onPlayerInfo"
class="es-video-player-page-css"/>
<s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
<div class="es-sdk-content-divider-css"/>
<div class="es-sdk-content-row-css">
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ref} from "vue";
import {
ESIPlayer,
ESMediaSource,
ESMediaSourceList,
ESPlayerAspectRatio,
ESPlayerDecode,
ESPlayerDefinition,
ESPlayerError,
ESPlayerInfo,
ESPlayerInterceptError,
ESPlayerInterceptResult,
ESPlayerPlayMode,
ESPlayerRate,
} from "@extscreen/es3-player";
import {useESRouter} from "@extscreen/es3-router";
import {ESAudioServicePlayer} from "@extscreen/es3-audio-service-player";
const TAG = 'ESAudioPlayerPage'
export default defineComponent({
name: '监听播放事件',
components: {
'es-audio-service-player': ESAudioServicePlayer,
},
setup(props, context) {
const log = useESLog()
const router = useESRouter()
const videoPlayer = ref<ESIPlayer>()
const playerWidth = 1920
const playerHeight = 1080
const onESCreate = (params) => {
log.e(TAG, "-------onESCreate------start---->>>>>")
videoPlayer.value?.initialize()
}
const onPlayerInitialized = (playerType) => {
log.e(TAG, "-------onESCreate------onPlayerInitialized---->>>>>")
let mediaSource: ESMediaSource = {
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3'
}
let mediaSourceList: ESMediaSourceList = {
index: 0,
list: [mediaSource]
}
log.e(TAG, "-------onPlayerInitialized---------->>>>>", playerType)
videoPlayer.value?.playMediaSourceList(mediaSourceList)
}
function onPlayerLazyInitSuccess(playerType: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerLazyInitSuccess------->>>', playerType)
}
}
function onPlayerLazyInitError(playerType: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerLazyInitError------->>>', playerType)
}
}
function onPlayerPlayMediaSourceList(playUriInfo: ESMediaSourceList): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerPlayMediaSourceList------->>>', playUriInfo)
}
}
function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerPlayMediaSource------->>>', mediaSource)
}
}
function onPlayerSizeChanged(width: number, height: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerSizeChanged------->>>', 'width:' + width, 'height:' + height)
}
}
function onPlayerPreparing(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPreparing----->>>')
}
}
function onPlayerPrepared(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPrepared----->>>')
}
}
function onPlayerBufferStart(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerBufferStart----->>>')
}
}
function onPlayerBufferEnd(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerBufferEnd----->>>')
}
}
function onPlayerPlaying(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPlaying----->>>')
}
}
function onPlayerProgressChanged(progress: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerProgressChanged----->>>', progress)
}
}
function onPlayerDurationChanged(duration: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerDurationChanged----->>>', duration)
}
}
function onPlayerSeekStart(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerSeekStart----->>>')
}
}
function onPlayerSeekCompleted(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerSeekCompleted----->>>')
}
}
function onPlayerPaused(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPaused----->>>')
}
}
function onPlayerResumed(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerResumed----->>>')
}
}
function onPlayerStopped(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerStopped----->>>')
}
}
function onPlayerCompleted(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerCompleted----->>>')
}
}
function onPlayerError(error: ESPlayerError): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerError----->>>', error)
}
}
function onPlayerInfo(info: ESPlayerInfo): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerInfo----->>>', info)
}
}
function onPlayerNoMediaSourceCanPlay(next: boolean): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerNoMediaSourceCanPlay----->>>', next)
}
}
function onPlayerVolumeChanged(leftVolume: number, rightVolume: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '---------------onPlayerVolumeChanged------->>>', 'leftVolume:' + leftVolume, 'rightVolume:' + rightVolume)
}
}
function onPlayerLeftVolumeChanged(leftVolume: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerLeftVolumeChanged----->>>', leftVolume)
}
}
function onPlayerRightVolumeChanged(rightVolume: number): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerRightVolumeChanged----->>>', rightVolume)
}
}
function onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerDefinitionListChanged----->>>', definitionList)
}
}
function onPlayerDefinitionChanged(definition: ESPlayerDefinition): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerDefinitionChanged----->>>', definition)
}
}
function onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPlayRateListChanged----->>>', rateList)
}
}
function onPlayerPlayRateChanged(rate: ESPlayerRate): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerPlayRateChanged----->>>', rate)
}
}
function onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerDecodeListChanged----->>>', decodeList)
}
}
function onPlayerDecodeChanged(decode: ESPlayerDecode): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerDecodeChanged----->>>', decode)
}
}
function onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerAspectRatioListChanged----->>>', aspectRatioList)
}
}
function onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerAspectRatioChanged----->>>', aspectRatio)
}
}
function onPlayerViewChanged(): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerViewChanged----->>>')
}
}
function onPlayerClickable(playerClickable: boolean): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerViewClickable----->>>', playerClickable)
}
}
function onPlayerInterceptSuccess(value: ESPlayerInterceptResult): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerInterceptSuccess----->>>', value)
}
}
function onPlayerInterceptError(value: ESPlayerInterceptError): void {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.d(TAG, '----------onPlayerInterceptError----->>>', value)
}
}
function onBackPressed() {
videoPlayer.value?.stop()
videoPlayer.value?.release()
router.back()
}
return {
onESCreate,
onPlayerLazyInitSuccess,
onPlayerLazyInitError,
onPlayerInitialized,
onPlayerPlayMediaSourceList,
onPlayerPlayMediaSource,
onPlayerInterceptSuccess,
onPlayerInterceptError,
onPlayerSizeChanged,
onPlayerPreparing,
onPlayerPrepared,
onPlayerBufferStart,
onPlayerBufferEnd,
onPlayerPlaying,
onPlayerProgressChanged,
onPlayerDurationChanged,
onPlayerSeekStart,
onPlayerSeekCompleted,
onPlayerPaused,
onPlayerResumed,
onPlayerStopped,
onPlayerCompleted,
onPlayerError,
onPlayerInfo,
onPlayerNoMediaSourceCanPlay,
onPlayerVolumeChanged,
onPlayerLeftVolumeChanged,
onPlayerRightVolumeChanged,
onPlayerDefinitionListChanged,
onPlayerDefinitionChanged,
onPlayerPlayRateListChanged,
onPlayerPlayRateChanged,
onPlayerDecodeListChanged,
onPlayerDecodeChanged,
onPlayerAspectRatioListChanged,
onPlayerAspectRatioChanged,
onPlayerViewChanged,
onPlayerClickable,
playerWidth,
playerHeight,
videoPlayer,
onBackPressed
}
},
});
</script>
<style>
.es-video-player-page-css {
position: absolute;
}
</style>
全局监听播放事件
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<es-audio-service-player
ref="player"
:player-width="playerWidth"
:player-height="playerHeight"
@onPlayerInitialized="onPlayerInitialized"
class="es-video-player-page-css"/>
<s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
<div class="es-sdk-content-divider-css"/>
<div class="es-sdk-content-row-css">
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {useESLog} from "@extscreen/es3-core";
import {ref} from "vue";
import {
ESIPlayer,
ESMediaSource,
ESMediaSourceList,
useESPlayerEventManager
} from "@extscreen/es3-player";
import {useESRouter} from "@extscreen/es3-router";
import {createESPlayerEventListener} from "./event/ESPlayerEvent";
import {ESAudioServicePlayer} from "@extscreen/es3-audio-service-player";
const TAG = 'ESAudioPlayerPage'
export default defineComponent({
name: '全局监听播放事件',
components: {
'es-audio-service-player': ESAudioServicePlayer,
},
setup(props, context) {
const log = useESLog()
const router = useESRouter()
const player = ref<ESIPlayer>()
const playerWidth = 1920
const playerHeight = 1080
//--------------------------------全局监听播放事件----------------START----------------
const playerManagerEventManager = useESPlayerEventManager()
const playerManagerEventListener = createESPlayerEventListener()
playerManagerEventManager.addListener(playerManagerEventListener)
//--------------------------------全局监听播放事件----------------END------------------
const onESCreate = (params) => {
log.e(TAG, "-------onESCreate------start---->>>>>")
player.value?.initialize()
}
const onPlayerInitialized = (playerType) => {
log.e(TAG, "-------onESCreate------onPlayerInitialized---->>>>>")
let mediaSource: ESMediaSource = {
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3'
}
let mediaSourceList: ESMediaSourceList = {
index: 0,
list: [mediaSource]
}
log.e(TAG, "-------onPlayerInitialized---------->>>>>", playerType)
player.value?.playMediaSourceList(mediaSourceList)
}
function onBackPressed() {
player.value?.stop()
player.value?.release()
router.back()
}
return {
onESCreate,
onPlayerInitialized,
playerWidth,
playerHeight,
player,
onBackPressed
}
},
});
</script>
<style>
.es-video-player-page-css {
position: absolute;
}
</style>
音频服务播放管理器
点击查看源码
vue
<template>
<div class="es-sdk-root-css">
<es-player-manager
ref="playerManager"
:initPlayerWindowType="2"
:playerList="playerListRef"
class="es-video-player-manager-page-css"/>
<s-title-view class="es-sdk-content-title-css" :text="this.$options.name"/>
<div class="es-sdk-content-divider-css"/>
</div>
</template>
<script lang="ts">
import {defineComponent} from "@vue/runtime-core";
import {markRaw, ref} from "vue";
import {ESMediaSource, ESMediaSourceList} from "@extscreen/es3-player";
import {ESIPlayerManager, ESMediaItem, ESMediaItemList, ESPlayerManager} from "@extscreen/es3-player-manager";
import {ESLogLevel, useESLog} from "@extscreen/es3-core";
import {ESAudioServicePlayer} from "@extscreen/es3-audio-service-player";
const TAG = 'ESAudioServicePlayerManagerPage'
export default defineComponent({
name: '音频服务播放管理器',
components: {
'es-player-manager': ESPlayerManager,
},
setup: function (props, context) {
const log = useESLog()
const playerManager = ref<ESIPlayerManager>()
const playerList = [markRaw(ESAudioServicePlayer)]
const playerListRef = ref(playerList)
let isPaused = false
const onESCreate = (params) => {
if (log.isLoggable(ESLogLevel.DEBUG)) {
log.e(TAG, "-------onESCreate---------->>>>>")
}
isPaused = false
let mediaSource: ESMediaSource = {
uri: 'http://qcloudcdn.a311.ottcn.com/data_center/audios/ifengfm/1898049/9644712/2ff957624598b7b105d5c86b809c854c.mp3'
}
let mediaSourceList: ESMediaSourceList = {
index: 0,
list: [mediaSource]
}
let mediaItem: ESMediaItem = {
mediaSourceList: mediaSourceList,
playerType: 5 //TODO 类型为5
}
let playList: ESMediaItemList = {
index: 0,
list: [mediaItem]
}
playerManager.value?.initialize()
playerManager.value?.playMediaList(playList)
}
const onESResume = () => {
log.e(TAG, "-------onESResume---------->>>>>")
if (isPaused) {
playerManager.value?.resume()
}
isPaused = false;
}
const onESPause = () => {
log.e(TAG, "-------onESPause---------->>>>>")
isPaused = true;
playerManager.value?.stop()
}
const onESDestroy = () => {
log.e(TAG, "-------onESDestroy---------->>>>>")
playerManager.value?.release()
}
return {
onESCreate,
onESResume,
onESPause,
onESDestroy,
playerListRef,
playerManager,
}
},
});
</script>
<style>
.es-video-player-manager-page-css {
position: absolute;
}
</style>