uniapp-zaudio: компонент для воспроизведения фонового аудио

Текущая версия — v2.2.51. Чтобы проверить версию, используйте команду console.log(ZAudio.version).

Предварительный просмотр

http://jingangtui.gitee.io/uniapp-z-audio/#/

Если документация отображается не полностью, пожалуйста, посетите gitee или загрузите пример.

Характеристики

• Поддержка H5, app и малых программ WeChat.
• Поддержка воспроизведения фонового звука.
• Поддержка синхронизации состояния на нескольких страницах.
• Поддержка трёх стилей пользовательского интерфейса.
• После входящего вызова прерывает воспроизведение и возобновляет после завершения разговора.
• Начиная с версии v2.1.0, поддерживает регистрацию нескольких бизнес-событий в одном и том же обратном вызове аудио.

Краткое описание

• Плагин состоит из класса ZAudio и компонента zaudio. Класс ZAudio отвечает за логику воспроизведения аудио, а компонент zaudio используется для рендеринга.
• ZAudio создаётся на основе методов uni.getBackgroundAudioManager и uni.createInnerAudioContext.
• В приложении обратите внимание на включение сетевого доступа. Если данные не отображаются, перезапустите приложение или проверьте настройки сетевого доступа.
• Версия 2.0 зависит от vuex, версия 2.1.0 и выше не зависит от vuex. Рекомендуется использовать последнюю версию.
• Если вам нравится этот проект или вы хотите добавить новые функции, приглашаем вас Star Fork PR.

Шаги по использованию

1. Загрузите плагин из Marketplace или выполните команду npm install uniapp-zaudio.

2. Создайте экземпляр класса ZAudio и подключите его:

   Внимание к регистру: ZAudio — это класс. Если вы используете HbuilderX, импортируйте плагин следующим образом: import ZAudio from '@/components/uniapp-zaudio' (возможно, потребуется изменить каталог). Или используйте npm: import ZAudio from 'uniapp-zaudio'.

   import ZAudio from '@/components/uniapp-zaudio'; //HbuilderX插件导入方式, import可能需要修改目录名哦
   // import ZAudio from 'uniapp-zaudio'; // npm引用方式
   
   let zaudio = new ZAudio({
     continuePlay: true, //продолжение воспроизведения
     autoPlay: true, //автоматическое воспроизведение (не поддерживается некоторыми браузерами)
   });
   Vue.prototype.$zaudio = zaudio; //подключение к Vue прототипу
   
   //Пример данных аудио, не используйте в реальных сценариях
   var data = [
     {
       src:
         "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2016aJan/18X/18d_DeH/01.mp3",
       title: "恭喜发财",
       singer: "刘德华",
       coverImgUrl:
         "https://img.1ting.com/images/special/75/s150_f84ef5082b0420f74cd2546b986ab0fc.jpg",
     },
     {
       src:
         "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
       title: "好运来",
       singer: "Автор 1111",
       coverImgUrl:
         "https://img.1ting.com/images/special/204/s150_77254cd4a4da1a33b8faf89c4cbf6e40.jpg",
     },
   ];
   zaudio.setAudio(data); //добавление аудио
   zaudio.setRender(0); //рендеринг первой песни

3. Используйте компонент:

Внимание к регистру: zaudio — это компонент.

<zaudio theme="theme3"></zaudio>

import zaudio from '@/components/uniapp-zaudio/zaudio';
// import zaudio from 'uniapp-zaудио/zaudio'
export default {
  components: { zaudio: zaudio },
};

Параметры компонента zaudio

Пример использования:

<zaudio theme="theme1" themeColor="#42b983" />

Методы и параметры объекта ZAudio

syncStateOn(action, fn) | Регистрация события для получения текущего состояния воспроизведения в реальном времени. См. Получение состояния воспроизведения аудио и его свойств | action (имя бизнес-операции), fn (функция обратного вызова, параметры обратного вызова см. Свойства аудиообъекта)

syncStateOff(action) | Отключение события, используемого для получения состояния воспроизведения аудио в реальном времени. См. Получение состояния воспроизведения аудио и его свойств| action (соответствует имени бизнес-операции при регистрации).

• Примеры использования:

Инициализация класса ZAudio и рендеринг аудио:

let zaudio = new ZAudio({
  continuePlay: true, //продолжение воспроизведения
  autoPlay: true, //автоматическое воспроизведение (частично не поддерживается браузерами)
});
var data = [
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2016aJan/18X/18d_DeH/01.mp3",
    title: "С праздником богатства",
    singer: "Лю Дэхуа",
    coverImgUrl:
      "https://img.1ting.com/images/special/75/s150_f84ef5082b0420f74cd2546b986ab0fc.jpg",
  },
  {
    src:
      "https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2015kNov/25X/25m_XiaoQ/03.mp3",
    title: "Счастливого пути",
    singer: "Автор 1111",
    coverImgUrl:
      "https://img.1ting.com/images/special/204/s150_77254cd4a4da1a33b8faf89c4cbf6e40.jpg",
  }
];

// Настройка данных аудио
zaudio.setAudio(data);
//Рендеринг первой песни
zaudio.setRender(0);

Асинхронная загрузка:

setTimeout(()=>{
    zaudio.setAudio(data);
    zaudio.operate(0); //Рендеринг первого аудио вручную
},2000)

Регистрация событий в обратных вызовах аудио

• Обратные вызовы аудио могут запускать различные события, такие как события воспроизведения, паузы и завершения. В одном обратном вызове можно зарегистрировать несколько независимых событий.
• zaudio.on(event, action, fn): регистрация события.
• zaudio.off(event, action): отключение события. Это можно сделать на странице, чтобы повысить производительность.
• event: имя метода обратного вызова. См. таблицу ниже.
• action: пользовательское имя операции. Одно и то же имя операции может быть зарегистрировано только один раз в одном и том же обратном вызове аудио. Повторные регистрации не заменяют существующие.
• fn: функция, которая будет выполняться при возникновении события. Некоторые обратные вызовы возвращают текущее состояние воспроизведения. См. следующую таблицу.

• Пример использования:

Воспроизведение обратного вызова с двумя событиями:

onLoad(query) {
    //воспроизведение обратного вызова, регистрация `event-a` и `event-b` двух событий печати
    this.$zaudio.on('playing', 'event-a', data => {
        console.log(data,'event-a')
    });
    this.$zaudio.on('playing', 'event-b', data => {
        console.log(data,'event-b')
    });
},

destroyed(){
    //отключение событий на странице для повышения производительности
    this.$zaudio.off('playing', 'event-a')
    this.$zaudio.off('playing', 'event-b')
}

Синхронный рендеринг текущего состояния воспроизведения на компонент zaudio

• Применение: когда компонент zaudio отображает данные, отличные от текущих данных воспроизведения, и необходимо синхронно отобразить текущее состояние воспроизведения.
• Пример использования:

onShow(){
    //Синхронно рендерим текущее состояние воспроизведения
    this.$zaudio.syncRender();
},

Получение состояния воспроизведения аудио и его свойств в реальном времени

• Начиная с версии 2.1.x, vuex больше не используется, поэтому состояние аудио необходимо отслеживать с помощью метода syncStateOn.
• syncStateOn (действие, fn): регистрирует событие для отслеживания состояния аудио в режиме реального времени.
• syncStateOff (действие): отключает событие отслеживания состояния аудио, которое можно отключить на странице для повышения производительности.
• действие: пользовательское имя операции, используемое для различения нескольких событий отслеживания состояния аудио.
• fn: обратный вызов, который получает состояние аудио и свойства в реальном времени. Параметры обратного вызова см. в разделе Свойства объекта аудио.

• Пример использования:

data(){
    return {
        audiolist: this.$zaudio.audiolist, //текущий список аудио
        playIndex: this.$zaudio.playIndex, //индекс текущего воспроизведения
        paused: this.$zaудио.paused, //приостановленное состояние текущего воспроизведения
        playinfo: this.$zaudio.playinfo //информация о текущем воспроизведении

    }
}
onShow(){
    //получение состояния аудио и свойств
    this.getAudioState();
},
methods:{
    getAudioState() {
        //регистрация page-index-get-state, получение состояния свойств zaudio в реальном времени
        this.$zaudio.syncStateOn('page-index-get-state', ({ audiolist, playIndex, paused, playinfo }) => {
            this.audiolist = audiolist;
            this.playIndex = playIndex;
            this.paused = paused;
            this.playinfo = playinfo;
        });
    }
},
onHide(){
    //отключить page-index-get-state для повышения производительности страницы
    this.$zaudio.syncStateOff('page-index-get-state')
}

Свойства объекта аудио

Пример использования:

let zaudio = new ZAudio();
console.log(zaudio.audiolist); // получить текущие данные списка аудиофайлов
console.log(zaudio.renderIndex); // получить значение индекса аудиофайла, который в данный момент рендерится компонентом zaudio

Примечание: атрибуты, полученные выше, не являются состоянием в реальном времени. Для получения состояния в реальном времени см. Получение состояния воспроизведения аудио и атрибутов в реальном времени.

Фоновое воспроизведение конфигурации

В manifest.json настройте для мини-программы:

"mp-weixin": {
    "requiredBackgroundModes": ["audio"],
    "appid": "",
    "setting": {
        "urlCheck": false
    },
    "usingComponents": true
}

Обратите внимание, что на платформе iOS необходимо упаковать IPA для того, чтобы это заработало.

"ios": {
    "UIBackgroundModes": ["audio"]
}

Если вы считаете этот проект хорошим или хотите добавить новые функции, приглашаем вас стать участником проекта, Star Fork PR.