Tracks hochladen

Wählen Sie, wer die Upload-Session erstellt oder autorisiert, und — wenn Ihr Server sie erstellt — wie Dateien übertragen werden. Die Wiedergabe ist eine separate Entscheidung; siehe Tracks abspielen und darauf zugreifen.

Upload-Lebenszyklus pro Datei

Eine Upload-Session kann viele Dateien autorisieren, aber jede Datei braucht einen eigenen Track und eine eigene Upload-URL. Erstellen Sie die Session, rufen Sie dann für jede Datei POST /v1/upload/{upload_session_id}/track auf und senden Sie die Bytes per PUT an track_upload.upload_url. Optional können Sie beim Erstellen der Session einen verschachtelten track für die erste Datei angeben. Vollständige Referenz: Upload Sessions.

Tracks hochladen

Wählen Sie, wer die Upload session erstellt, und dann — falls nötig — wie Dateien übertragen werden. Upload- und Wiedergabe-Entscheidungen sind unabhängig.

Wer soll die Upload session erstellen oder autorisieren?

AudioDN Uploader- oder (voice) Recorder-Webkomponenten Schnellste Einrichtung. Webkomponenten mit einem begrenzten Client-Side Upload key; sie übernehmen Session-Erstellung und Dateiübertragung. Der (voice) Recorder nimmt über das Mikrofon auf. Ihr Browser oder Ihre native Anwendung Ein begrenzter Client-Side Upload key. Ihre App erstellt die Upload session und lädt jede Datei zur bereitgestellten URL hoch. Ihr Server Ein API Access key auf Ihrem Server. Ihr Server wendet anwendungsspezifische Autorisierung an und erstellt eine kurzlebige Upload session.

Wie soll der Nutzer die Dateien übertragen?

AudioDN Uploader- oder (voice) Recorder-Webkomponenten Übergeben Sie die serverseitig erstellte Upload session an die AudioDN Uploader- oder (voice) Recorder-Webkomponente. Eigene Browser- oder native Upload-Oberfläche Nutzen Sie die bereitgestellten Upload-Informationen in Ihrer eigenen Upload-UI.

AudioDN Uploader- oder (voice) Recorder-Webkomponenten mit einer Client-Side Upload key

Schnellstes Setup. Eine eingeschränkte Client-Side Upload key; die Komponente erstellt die Session und lädt jede Datei hoch.

Eine Client-Side Upload key erstellen

Gehen Sie im Dashboard zu Settings → API Keys und erstellen Sie einen Client-Side Upload-Schlüssel. Optional auf eine Sammlung beschränken. Dieser Schlüssel kann nur Upload-Sessions erstellen — keine Tracks lesen oder löschen.

Die Webkomponente installieren

npm install @audiodn/components

Uploader:

import '@audiodn/components/uploader'

Oder (voice) Recorder:

import '@audiodn/components/recorder'

CDN-Alternativen:

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/uploader.js"></script>

<script type="module" src="https://unpkg.com/@audiodn/components@latest/dist/recorder.js"></script>

Die Webkomponente rendern

<audiodn-uploader
  api-key="CLIENT-SIDE-UPLOAD-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>

<audiodn-recorder
  api-key="CLIENT-SIDE-UPLOAD-KEY"
  collection-id="COLLECTION-ID"
  accent-color="#ff00ff"
></audiodn-recorder>

Wenn der Schlüssel auf eine Sammlung beschränkt ist, können Sie collection-id weglassen. Setzen Sie niemals beides: api-key und upload-session-id.

Was die Webkomponente macht

Für jede Datei erstellt (oder wiederverwendet) die Komponente eine Upload-Session, ruft POST /v1/upload/:upload_session_id/track auf und lädt die Bytes nach track_upload.upload_url hoch. AudioDN verarbeitet anschließend Ihre konfigurierten Varianten.

Optional: konfigurieren Sie einen track-processing-Webhook, um zu erfahren, wann ein Track bereit ist.

Eigener Client-Upload mit einer Client-Side Upload key

Ihr Browser oder Ihre native App erstellt die Upload-Session und lädt jede Datei hoch. Sie bauen die Oberfläche.

Eine Client-Side Upload key erstellen

Erstellen Sie einen eingeschränkten Client-Side Upload-Schlüssel im Dashboard. Sicher zur Einbettung in die App. Verwenden Sie niemals eine API Access key im Client-Code.

Eine Upload-Session erstellen

const response = await fetch('https://api.audiodelivery.net/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer CLIENT-SIDE-UPLOAD-KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ collection_id: 'COLLECTION-ID', expires_in: 3600 })
});
const { upload_session_id } = await response.json();

var request = URLRequest(url: URL(string: "https://api.audiodelivery.net/v1/upload_session")!)
request.httpMethod = "POST"
request.setValue("Bearer CLIENT-SIDE-UPLOAD-KEY", forHTTPHeaderField: "Authorization")
request.setValue("application/json", forHTTPHeaderField: "Content-Type")
request.httpBody = try JSONEncoder().encode(["collection_id": "COLLECTION-ID", "expires_in": 3600])
let (data, _) = try await URLSession.shared.data(for: request)
// Decode upload_session_id from data

val body = """{"collection_id":"COLLECTION-ID","expires_in":3600}"""
  .toRequestBody("application/json".toMediaType())
val request = Request.Builder()
  .url("https://api.audiodelivery.net/v1/upload_session")
  .post(body)
  .addHeader("Authorization", "Bearer CLIENT-SIDE-UPLOAD-KEY")
  .build()
val response = client.newCall(request).execute()
// Parse upload_session_id from response body

final response = await http.post(
  Uri.parse('https://api.audiodelivery.net/v1/upload_session'),
  headers: {
    'Authorization': 'Bearer CLIENT-SIDE-UPLOAD-KEY',
    'Content-Type': 'application/json',
  },
  body: jsonEncode({'collection_id': 'COLLECTION-ID', 'expires_in': 3600}),
);
final json = jsonDecode(response.body) as Map<String, dynamic>;
final uploadSessionId = json['upload_session_id'] as String;

Für jede Datei einen Track erstellen

const response = await fetch(
  `https://api.audiodelivery.net/v1/upload/${upload_session_id}/track`,
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ file_name: 'song.wav' })
  }
);
const { track_id, track_upload } = await response.json();
const { method, upload_url } = track_upload;

var request = URLRequest(url: URL(string: "https://api.audiodelivery.net/v1/upload/\(sessionId)/track")!)
request.httpMethod = "POST"
request.setValue("application/json", forHTTPHeaderField: "Content-Type")
request.httpBody = try JSONEncoder().encode(["file_name": "recording.m4a"])
let (data, _) = try await URLSession.shared.data(for: request)
// Decode track_upload.upload_url and method

val body = """{"file_name":"recording.m4a"}""".toRequestBody("application/json".toMediaType())
val request = Request.Builder()
  .url("https://api.audiodelivery.net/v1/upload/$uploadSessionId/track")
  .post(body)
  .build()
val response = client.newCall(request).execute()
// Parse track_upload.upload_url

final response = await http.post(
  Uri.parse('https://api.audiodelivery.net/v1/upload/$uploadSessionId/track'),
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode({'file_name': 'recording.m4a'}),
);
final trackUpload = (jsonDecode(response.body) as Map)['track_upload'] as Map;
final uploadUrl = trackUpload['upload_url'] as String;

Sie können beim Erstellen der Session auch ein verschachteltes track-Objekt für die erste Datei angeben und diesen Schritt dann für weitere Dateien nutzen. Die Upload-URL liegt unter track_upload.upload_url (nicht am Track-Objekt).

Die Bytes hochladen

await fetch(upload_url, {
  method,
  headers: { 'Content-Type': file.type },
  body: file
});

var request = URLRequest(url: uploadURL)
request.httpMethod = method
request.setValue("audio/mp4", forHTTPHeaderField: "Content-Type")
request.httpBodyStream = InputStream(url: fileURL)
let (_, response) = try await URLSession.shared.data(for: request)
print((response as! HTTPURLResponse).statusCode) // 200 on success

val fileBody = File(filePath).asRequestBody("audio/mp4".toMediaType())
val request = Request.Builder()
  .url(uploadUrl)
  .put(fileBody)
  .addHeader("Content-Type", "audio/mp4")
  .build()
client.newCall(request).execute().code

final response = await http.put(
  Uri.parse(uploadUrl),
  headers: {'Content-Type': 'audio/mp4'},
  body: await File(filePath).readAsBytes(),
);

Auf die Verarbeitung warten

Abfragen Sie GET /v1/track/{track_id}, bis track.track_status_id ready ist (erfordert eine API Access key oder das Dashboard), oder nutzen Sie einen Webhook. Client-Side Upload keys können den Track-Status nicht lesen — bevorzugen Sie Webhooks oder eine Server-Abfrage für die Bereitschaft.

Serverseitig erstellte Upload-Session mit dem AudioDN Uploader- oder (voice) Recorder-Webkomponenten

Ihr Server autorisiert den Upload, erstellt eine kurzlebige Session und übergibt sie an die Komponente.

Eine API Access key auf Ihrem Server behalten

Erstellen Sie einen API Access-Schlüssel im Dashboard. Senden Sie ihn niemals an den Browser oder die mobile App.

Autorisieren, dann eine Upload-Session erstellen

Wenden Sie Ihre eigenen Prüfungen an (Login, Kontingent, Berechtigungen), dann:

const response = await fetch('https://api.audiodelivery.net/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_ACCESS_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    collection_id: 'COLLECTION-ID',
    expires_in: 3600
    // Optional: track: { file_name: 'song.wav' } to also create the first track
  })
});

const { upload_session_id, upload_session } = await response.json();
// Pass upload_session_id to the client (Uploader) or continue with per-track create.

Die Session an die Webkomponente übergeben

npm install @audiodn/components

import '@audiodn/components/uploader'

<audiodn-uploader
  upload-session-id="UPLOAD-SESSION-ID"
  accent-color="#ff00ff"
></audiodn-uploader>

<audiodn-recorder
  upload-session-id="UPLOAD-SESSION-ID"
  accent-color="#ff00ff"
></audiodn-recorder>

Verwenden Sie nur upload-session-id — setzen Sie nicht zusätzlich api-key.

Die Komponente lädt hoch

Der Uploader- oder (voice) Recorder-Webkomponente führt die Track-Erstellung und den Byte-Upload für Sie durch. Optional: Webhook für die Bereitschaft.

Serverseitig erstellte Upload-Session mit einer eigenen Oberfläche

Ihr Server erstellt die Session; Ihre eigene Web- oder native UI erstellt Tracks und lädt Dateien hoch.

Eine API Access key auf Ihrem Server behalten

Erstellen Sie einen API Access-Schlüssel. Nur auf dem Server.

Eine Upload-Session auf dem Server erstellen

const response = await fetch('https://api.audiodelivery.net/v1/upload_session', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_API_ACCESS_KEY',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    collection_id: 'COLLECTION-ID',
    expires_in: 3600
    // Optional: track: { file_name: 'song.wav' } to also create the first track
  })
});

const { upload_session_id, upload_session } = await response.json();
// Pass upload_session_id to the client (Uploader) or continue with per-track create.

Geben Sie upload_session_id an den Client zurück. Geben Sie die API Access key nicht zurück.

Für jede Datei einen Track erstellen (Client oder Server)

const response = await fetch(
  `https://api.audiodelivery.net/v1/upload/${upload_session_id}/track`,
  {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ file_name: 'song.wav' })
  }
);
const { track_id, track_upload } = await response.json();
const { method, upload_url } = track_upload;

var request = URLRequest(url: URL(string: "https://api.audiodelivery.net/v1/upload/\(sessionId)/track")!)
request.httpMethod = "POST"
request.setValue("application/json", forHTTPHeaderField: "Content-Type")
request.httpBody = try JSONEncoder().encode(["file_name": "recording.m4a"])
let (data, _) = try await URLSession.shared.data(for: request)
// Decode track_upload.upload_url and method

val body = """{"file_name":"recording.m4a"}""".toRequestBody("application/json".toMediaType())
val request = Request.Builder()
  .url("https://api.audiodelivery.net/v1/upload/$uploadSessionId/track")
  .post(body)
  .build()
val response = client.newCall(request).execute()
// Parse track_upload.upload_url

final response = await http.post(
  Uri.parse('https://api.audiodelivery.net/v1/upload/$uploadSessionId/track'),
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode({'file_name': 'recording.m4a'}),
);
final trackUpload = (jsonDecode(response.body) as Map)['track_upload'] as Map;
final uploadUrl = trackUpload['upload_url'] as String;

Die Bytes hochladen

await fetch(upload_url, {
  method,
  headers: { 'Content-Type': file.type },
  body: file
});

var request = URLRequest(url: uploadURL)
request.httpMethod = method
request.setValue("audio/mp4", forHTTPHeaderField: "Content-Type")
request.httpBodyStream = InputStream(url: fileURL)
let (_, response) = try await URLSession.shared.data(for: request)
print((response as! HTTPURLResponse).statusCode) // 200 on success

val fileBody = File(filePath).asRequestBody("audio/mp4".toMediaType())
val request = Request.Builder()
  .url(uploadUrl)
  .put(fileBody)
  .addHeader("Content-Type", "audio/mp4")
  .build()
client.newCall(request).execute().code

final response = await http.put(
  Uri.parse(uploadUrl),
  headers: {'Content-Type': 'audio/mp4'},
  body: await File(filePath).readAsBytes(),
);

Warten, bis bereit

// Processing starts automatically. Poll until ready, or use a webhook.
let track;
do {
  await new Promise((r) => setTimeout(r, 5000));
  const res = await fetch(`https://api.audiodelivery.net/v1/track/${track_id}`, {
    headers: { 'Authorization': 'Bearer YOUR_API_ACCESS_KEY' }
  });
  ({ track } = await res.json());
} while (track.track_status_id !== 'ready');

Oder nutzen Sie den track-processing-Webhook statt zu pollen.

Tracks hochladen

Upload-Lebenszyklus pro Datei

Tracks hochladen

AudioDN Uploader- oder (voice) Recorder-Webkomponenten mit einer Client-Side Upload key

Eine Client-Side Upload key erstellen

Die Webkomponente installieren

Die Webkomponente rendern

Was die Webkomponente macht

Eigener Client-Upload mit einer Client-Side Upload key

Eine Client-Side Upload key erstellen

Eine Upload-Session erstellen

Für jede Datei einen Track erstellen

Die Bytes hochladen

Auf die Verarbeitung warten

Serverseitig erstellte Upload-Session mit dem AudioDN Uploader- oder (voice) Recorder-Webkomponenten

Eine API Access key auf Ihrem Server behalten

Autorisieren, dann eine Upload-Session erstellen

Die Session an die Webkomponente übergeben

Die Komponente lädt hoch

Serverseitig erstellte Upload-Session mit einer eigenen Oberfläche

Eine API Access key auf Ihrem Server behalten

Eine Upload-Session auf dem Server erstellen

Für jede Datei einen Track erstellen (Client oder Server)

Die Bytes hochladen

Warten, bis bereit

Verwandte Referenzen