Skip to content

音频播放服务 ESAudioPlayerService

简介

通用音频播放服务。封装了音频播放常用功能

ESAudioPlayerService实现了ESIPlayer接口。

ESAudioPlayerServiceESIPlayer有相同的数据结构,事件,接口,属性。

基础用法

点击查看源码
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>