56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import AudioPlayer from "@/components/AudioPlayer";
|
|
|
|
export default function AudioTestPage() {
|
|
const [testUrl, setTestUrl] = useState("");
|
|
const [testRecordingId, setTestRecordingId] = useState("test-id");
|
|
|
|
return (
|
|
<div className="container mx-auto p-6 max-w-4xl">
|
|
<h1 className="text-2xl font-bold mb-6">音频播放测试</h1>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
音频文件 URL:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={testUrl}
|
|
onChange={(e) => setTestUrl(e.target.value)}
|
|
placeholder="https://your-bucket.s3.region.amazonaws.com/path/to/file.webm"
|
|
className="w-full p-3 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-2">
|
|
录音 ID (用于访问检查):
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={testRecordingId}
|
|
onChange={(e) => setTestRecordingId(e.target.value)}
|
|
placeholder="recording-id"
|
|
className="w-full p-3 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
|
/>
|
|
</div>
|
|
|
|
{testUrl && (
|
|
<div className="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
|
|
<h3 className="font-semibold mb-4">音频播放器测试:</h3>
|
|
<AudioPlayer
|
|
src={testUrl}
|
|
title="测试音频"
|
|
duration={0}
|
|
recordingId={testRecordingId}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|