Antarmuka Audio Player dengan judul contoh.
Antarmuka Audio Player dengan judul contoh.
← Semua panduan native

Xodera Plugins · Bubble Native

Xodera Audio Player Native

Tambahkan pemutar audio yang jelas ke pelajaran, pesan suara, atau catatan produk. Biarkan orang mendengarkan, mengubah kecepatan, dan melanjutkan dari posisi yang tersimpan.

Public beta guides · Haptics instructions are in its Bubble listing

Public beta offer: free Bubble install · 7-day card trial, then US$1.50/month per plugin/project.

Dokumentasi ditinjau 6 November 2026

Contoh praktis

Catatan suara dalam percakapan dukungan

Tautan file biasa mengirim pengguna keluar dari percakapan dan membuat balasan panjang sulit untuk ditinjau.

`source_url = Selected Message’s audio URL`; `title = Selected Message’s sender label`; `subtitle = Selected Message’s timestamp`.

Tempatkan pemutar di detail pesan yang dipilih. Biarkan pengguna Play/Pause, Seek ke titik yang berguna dan Set speed. Kaitkan `is_active` ke percakapan yang terbuka.

Gunakan `is_playing`, `current_time`, dan `duration` untuk menampilkan kemajuan. Simpan ID Message di aplikasi Anda sehingga peristiwa terlambat tidak dapat memperbarui percakapan lain.

Pada `player_error`, tampilkan `error_code` dan tawarkan Reload source; pertahankan pesan dan jangan pernah menandainya sebagai telah didengarkan setelah terjadi kesalahan.

Hanya pemutaran. Aplikasi Anda menyimpan kemajuan mendengarkan.

Lanjutkan pelajaran bahasa pada posisi yang disimpan

Pelajar perlu memutar ulang bagian sulit alih-alih memulai ulang seluruh pelajaran.

`source_url = Current Lesson’s audio URL`; `title = Current Lesson’s name`; posisi terakhir milik pelajar dan pelajaran tersebut dalam basis data Anda.

Setelah `ready` untuk pelajaran saat ini, Seek ke detik yang disimpan dan tunggu pengguna untuk Play. Gunakan Set speed untuk mendengarkan lebih lambat. Simpan kemajuan dengan alur kerja aplikasi Anda sendiri.

Baca `current_time` dan `duration`. Pada `playback_ended`, aplikasi Anda dapat mencatat tonggak mendengarkan untuk Lesson saat ini.

Jika sumber berubah, buang posisi lama sampai pelajaran itu dimuat. Jangan menganggap penyelesaian mendengarkan sebagai bukti bahwa pelajar memahami atau lulus tes.

Hanya pemutaran. Aplikasi Anda menyimpan kemajuan mendengarkan.

Tinjau lampiran audio dengan komentar berstempel waktu

Editor atau pelatih perlu melompat dari komentar ke momen relevan dalam rekaman.

`source_url = Selected Review’s recording URL`; setiap Komentar milik aplikasi menyimpan nilai detiknya masing‑masing; `waveform_peaks_json` opsional berisi puncak nyata untuk rekaman yang sama.

Klik Komentar → Seek ke detiknya → Play. Saat sumber berubah, ganti atau bersihkan puncak dan kaitkan Ulasan yang dipilih kembali.

Tampilkan `current_time` di samping penyusun komentar Anda. `waveform_available` memberi tahu UI Anda apakah puncak yang disediakan tersedia.

Batasi atau tolak stempel waktu usang terhadap durasi saat ini di aplikasi Anda. Jika tidak ada puncak nyata, tampilkan kontrol progres biasa alih-alih analisis audio yang dibuat-buat.

Hanya pemutaran. Aplikasi Anda menyimpan kemajuan mendengarkan.

Apa yang berfungsi sekarang

Public beta. Use the documented controls and actions; test supported formats, permissions and device behavior in your own native app. Browser preview does not validate native device output.

Buat alur kerja

Gunakan tindakan beta yang tersedia di bawah ini dan uji hasilnya pada perangkat target Anda.

Contoh-contoh ini menggunakan catatan aplikasi seperti Lesson, Message, dan Order. Ganti mereka dengan tipe data dan nama elemen Anda sendiri. Alamat media contoh harus diganti dengan file Anda sendiri.

  1. Tambahkan elemen audio. Atur source_url = Selected Message's audio_url, title = Selected Message's sender_label, dan subtitle = Selected Message's date_label.

  2. Jika Anda memiliki data gelombang nyata untuk rekaman ini, kirimkan dalam waveform_peaks_json. Jika tidak, biarkan kosong.

  3. Saat peristiwa ready terjadi, gunakan Seek dengan jumlah detik yang disimpan jika diperlukan. Biarkan pengguna menekan Play. Gunakan Pause, Seek, dan Set speed untuk tombol pemutar.

  4. Tampilkan current_time dan duration. Pada playback_ended, simpan kemajuan mendengarkan untuk pesan atau pelajaran yang dipilih. Atur is_active untuk menunjukkan apakah tampilan ini terbuka.

Diagram alur kerja — bukan tangkapan layar aplikasi

Konfigurasi sekali saja

Buat atau pilih proyek aplikasi Bubble Anda di BestPlugins → Dashboard → Plugins. Pilih Xodera Audio Player Native, salin kuncinya, lalu buka Bubble → Plugins → Xodera Audio Player Native dan tempelkan ke licensing_api_key. Simpan sekali; kemudian gunakan tindakan di bawah ini. Setiap plugin di setiap proyek memiliki kunci masing‑masing.

Gunakan alamat file audio langsung yang dapat dibuka aplikasi. Memutar audio tidak memerlukan akses mikrofon atau kamera.

Konfigurasi sekali saja
  1. Buat atau pilih proyek aplikasi Bubble Anda di BestPlugins → Dashboard → Plugins.
  2. Pilih plugin ini dan salin kunci proyeknya.
  3. Open Bubble → Plugins → this plugin. Paste its project key into licensing_api_key and save.
  4. Tambahkan elemen, pilih data aplikasi Anda, dan bangun alur kerja di bawah ini.
  5. In the dashboard, review and confirm the 7-day card trial for this plugin. It then costs US$1.50/month per app project, including development and production. Cancel before the trial ends to avoid the first charge.
Instalasi dan langganan

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

Simpan hasil di aplikasi Anda

Contoh ListeningProgress: owner = Current User, lesson = Selected Lesson, seconds = Audio Player's current_time, duration = Audio Player's duration. Simpan saat pengguna menjeda atau meninggalkan pelajaran, bukan pada setiap pembaruan layar.

Kegagalan, pembatalan, dan pemulihan

Pada player_error, tampilkan error_code dan tawarkan Reload source. Pertahankan catatan pesan atau pelajaran. Ketika rekaman lain dipilih, muat posisi tersimpan masing‑masing. Kembali ke tampilan tidak memulai pemutaran secara otomatis.

Kemampuan dan batasan

Kecepatan pemutaran: 1, 1.5, dan 2. Volume: 0–1. Data gelombang: nilai 2–2048 antara 0 dan 1. Format audio yang didukung tergantung pada perangkat. Pemutar tidak merekam, mentranskripsi, atau menyimpan audio secara permanen untuk penggunaan offline. Pemutaran di latar belakang dan layar kunci tidak dijamin.

Pengaturan, tindakan, dan hasil

Gunakan nama-nama ini di Bubble. Fitur yang direncanakan ditandai secara terpisah.

Pengaturan beta yang tersedia

Pengaturan elemen

source_url · textwaveform_peaks_json · texttitle · textsubtitle · textplayback_rate · numbervolume · numberloop · yes_nois_active · yes_nodisabled · yes_noui_text_json · textlanguage · text

Status

player_status · textis_playing · yes_nois_loaded · yes_nois_buffering · yes_nocurrent_time · numberduration · numberprogress · numberplayback_rate · numbervolume · numberis_looping · yes_nowaveform_available · yes_nowaveform_status · texterror_code · text

Acara

readyplayback_startedplayback_pausedplayback_endedseek_completedrate_changedplayer_error

Tindakan dan inputnya

PlayPauseToggleStopSeekSet speedSet volumeReload source
Pengaturan elemen · 11
source_urltext · Bawaan: ""
Nilai contohhttps://bestplugins.online/native-samples/lesson.mp3
Contoh ekspresi BubbleSelected Message's audio_url
Alamat file audio, video, atau gambar yang dipilih. Gunakan tipe file yang didukung plugin ini.
waveform_peaks_jsontext · Bawaan: ""
Nilai contoh[0.1,0.4,0.2,0.7]
Contoh ekspresi BubbleSelected Message's waveform_peaks_json
Nilai amplitudo ternormalkan yang nyata untuk rekaman ini; biarkan kosong jika tidak tersedia.
titletext · Bawaan: ""
Nilai contohLesson 4 — review
Contoh ekspresi BubbleSelected Lesson's name
Teks aplikasi yang terlihat; kosong akan menggunakan salinan terlokalisasi bawaan bila didukung. Tanpa kredensial.
subtitletext · Bawaan: ""
Nilai contohTeacher · today
Contoh ekspresi BubbleSelected Message's sender_label
Teks aplikasi yang terlihat; kosong akan menggunakan salinan terlokalisasi bawaan bila didukung. Tanpa kredensial.
playback_ratenumber · Bawaan: 1
Nilai contoh1.5
Contoh ekspresi BubbleCurrent User's listening_speed
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
volumenumber · Bawaan: 1
Nilai contoh0.8
Contoh ekspresi BubbleVolume Slider's value
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
loopyes_no · Bawaan: false
Nilai contohno
Contoh ekspresi BubbleSelected Lesson's repeat_enabled
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
is_activeyes_no · Bawaan: true
Nilai contohyes
Contoh ekspresi BubbleGuideHost's view_is_active (your yes/no custom state)
Setel ya saat tampilan ini terbuka. Setel tidak saat keluar, sehingga pemutaran atau pekerjaan saat ini dapat berhenti.
disabledyes_no · Bawaan: false
Nilai contohno
Contoh ekspresi BubbleGuideHost's is_busy (your yes/no custom state)
Nonaktifkan elemen saat aplikasi Anda sibuk atau tindakan ini tidak tersedia.
ui_text_jsontext · Bawaan: ""
Nilai contoh{}
Contoh ekspresi BubbleApp Settings' player_labels_json (supported keys only)
JSON opsional dengan label tombol yang didukung. Biarkan kosong untuk menggunakan teks bawaan.
languagetext · Bawaan: "auto"
Nilai contohuk
Contoh ekspresi BubbleCurrent User's preferred_language
Set language=auto untuk mengikuti perangkat atau bahasa peramban yang didukung. Masukkan kode bahasa yang didukung untuk memilihnya secara eksplisit.
Tindakan dan inputnya · 8
Play

Tidak ada parameter aksi

Pause

Tidak ada parameter aksi

Toggle

Tidak ada parameter aksi

Stop

Tidak ada parameter aksi

Seek
secondsnumber · Bawaan: —
Nilai contoh12
Contoh ekspresi BubbleSelected Comment's seconds
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
Set speed
ratenumber · Bawaan: —
Nilai contoh1.5
Contoh ekspresi BubbleSpeed Dropdown's value
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
Set volume
volumenumber · Bawaan: —
Nilai contoh0.8
Contoh ekspresi BubbleVolume Slider's value
Gunakan nilai catatan bisnis saat ini; validasi terhadap batas di bawah.
Reload source

Tidak ada parameter aksi

Status dan peristiwa

Status

player_status · text

Hasil saat ini dari tindakan ini. Gunakan peristiwa penyelesaian yang cocok sebelum menyimpan keberhasilan.

is_playing · yes_no

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

is_loaded · yes_no

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

is_buffering · yes_no

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

current_time · number

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

duration · number

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

progress · number

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

playback_rate · number

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

volume · number

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

is_looping · yes_no

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

waveform_available · yes_no

Nilai saat ini untuk item yang dipilih. Baca setelah peristiwa terkait.

waveform_status · text

Hasil saat ini dari tindakan ini. Gunakan peristiwa penyelesaian yang cocok sebelum menyimpan keberhasilan.

error_code · text

Informasi error untuk tindakan terakhir. Tampilkan pesan yang membantu dan tawarkan percobaan ulang yang relevan.

Acara

ready

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

playback_started

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

playback_paused

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

playback_ended

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

seek_completed

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

rate_changed

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

player_error

Saat peristiwa ini terjadi, baca status terkait dari elemen yang sama.

Pertanyaan yang diajukan pengembang

Apakah itu membuat gelombang?

Tidak. Sediakan puncak ternormalisasi yang sebenarnya untuk sumber itu; kemajuan biasa berfungsi tanpa mereka.

Bagaimana cara kerja langganan?

For Audio Player, Video Player, Photo Editor, Audio Recorder, Files Kit and Haptics: free Bubble installation, a 7-day trial with a card, then US$1.50 per month per plugin and app project. Development and production are included, with no operation cap. File-size and feature limits still apply. Review billing and cancellation before confirming. Other plugins remain unavailable for purchase.

Panduan terkait

Untuk bantuan, beri tahu kami plugin dan perangkat yang Anda gunakan, tindakan yang Anda coba, dan apa yang terjadi. Gunakan contoh tanpa data pribadi. Jangan pernah membagikan kunci atau file pribadi Anda.