Quran Data from Json With Audio Player Surah

quran.php mengambil data audio dari API https://quran-api.santrikoding.com/api/surah/{nomor} dan menambahkan fitur play/pause untuk audio.

Langkah-langkah:

  1. Ambil data audio dari API.
  2. Tambahkan elemen audio pada halaman detail surat.
  3. Tambahkan kontrol play/pause untuk audio.

Berikut adalah kode yang diperbarui untuk quran.php:

quran.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Detail Surat Al-Quran</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <style>
        .amiri-regular {
            font-family: "Amiri", serif;
            font-weight: 400;
            font-style: normal;
        }
        .amiri-bold {
            font-family: "Amiri", serif;
            font-weight: 700;
            font-style: normal;
        }
        .amiri-regular-italic {
            font-family: "Amiri", serif;
            font-weight: 400;
            font-style: italic;
        }
        .amiri-bold-italic {
            font-family: "Amiri", serif;
            font-weight: 700;
            font-style: italic;
        }

        .custom-audio {
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            background: none;
            padding: 5px 0;
        }

        .custom-audio-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            border-radius: 5px;
            width: 100%;
        }

        .custom-audio-container .play-pause-btn, .custom-audio-container .prev-btn, .custom-audio-container .next-btn, .custom-audio-container .shuffle-btn, .custom-audio-container .loop-btn, .custom-audio-container .close-btn {
            font-size: 24px;
            cursor: pointer;
            margin: 0 10px;
        }

        .custom-audio-container .progress-container {
            flex-grow: 1;
            margin: 0 10px;
            height: 5px;
            background: #f5c6cb;
            border-radius: 5px;
            position: relative;
        }

        .custom-audio-container .progress {
            height: 100%;
            background: #dc3545;
            width: 0;
            border-radius: 5px;
        }

        .custom-audio-container .progress-container input[type="range"] {
            width: 100%;
            position: absolute;
            top: -7px;
            background: transparent;
            -webkit-appearance: none;
            appearance: none;
        }

        .custom-audio-container .progress-container input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background: #dc3545;
            cursor: pointer;
        }

        .custom-audio-container .progress-container input[type="range"]::-moz-range-thumb {
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background: #dc3545;
            cursor: pointer;
        }

        .custom-audio-container .time {
            font-size: 14px;
            margin: 0 10px;
        }

        .custom-audio-container input[type="range"] {
            width: 100px;
            margin: 0 10px;
        }

        .audio-popup {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
            z-index: 1000;
            width: 100%;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        .audio-info {
            font-size: 16px;
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <?php
        $json = file_get_contents('quran.json');
        $surahs = json_decode($json, true);
        $surah_id = isset($_GET['id']) ? $_GET['id'] : 1; // Default to Surah 1 if no ID is set

        $selected_surah = null;
        foreach ($surahs as $surah) {
            if ($surah['id'] == $surah_id) {
                $selected_surah = $surah;
                break;
            }
        }

        if ($selected_surah) {
            // Fetch audio URL from API
            $audio_url = null;
            $api_url = 'https://quran-api.santrikoding.com/api/surah/' . $surah_id;
            $api_response = file_get_contents($api_url);
            $api_data = json_decode($api_response, true);
            if (isset($api_data['audio'])) {
                $audio_url = $api_data['audio'];
            }

            echo '<h1 class="my-4">' . $selected_surah['name'] . ' (' . $selected_surah['transliteration'] . ')</h1>';
            echo '<p>Type: ' . $selected_surah['type'] . '</p>';
            echo '<p>Total Verses: ' . $selected_surah['total_verses'] . '</p>';

            // Display audio player if audio URL is available
            if ($audio_url) {
                echo '<div class="my-4">';
                echo '<button class="btn btn-danger" onclick="showPlayer(\'' . $audio_url . '\', \'' . $selected_surah['name'] . '\')"><i class="fas fa-play"></i> Play Audio</button>';
                echo '</div>';
            }

            if (isset($selected_surah['verses'])) {
                foreach ($selected_surah['verses'] as $verse) {
                    echo '<div class="card my-2">';
                    echo '<div class="card-body">';
                    echo '<h5 class="card-title">Ayat ' . $verse['id'] . '</h5>';
                    echo '<p class="card-text amiri-regular">' . $verse['text'] . '</p>';
                    echo '<p class="card-text"><small class="text-muted">' . $verse['translation'] . '</small></p>';
                    echo '</div>';
                    echo '</div>';
                }
            } else {
                echo '<p>Teks atau terjemahan tidak tersedia.</p>';
            }
        } else {
            echo '<p>Surat tidak ditemukan.</p>';
        }
        ?>
    </div>

    <div class="audio-popup alert alert-danger">
        <div class="custom-audio-container">
            <i class="fas fa-times close-btn" onclick="closePlayer()"></i>
            <i class="fas fa-step-backward prev-btn" onclick="prevAudio()"></i>
            <i class="fas fa-play play-pause-btn" onclick="togglePlayPause(this)"></i>
            <div class="audio-info" id="audio-title">Audio Title</div>
            <div class="progress-container">
                <div class="progress"></div>
                <input type="range" id="seek-bar" value="0">
            </div>
            <span class="time current-time">0:00</span>
            <span class="time">/</span>
            <span class="time duration-time">0:00</span>
            <i class="fas fa-step-forward next-btn" onclick="nextAudio()"></i>
            <i class="fas fa-random shuffle-btn" onclick="toggleShuffle()"></i>
            <i class="fas fa-sync-alt loop-btn" onclick="toggleLoop()"></i>
            <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
        </div>
        <audio id="audio1" class="custom-audio">
            <source id="audio-source" src="" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>

    <script>
        const audio = document.getElementById('audio1');
        const playPauseBtn = document.querySelector('.play-pause-btn');
        const progressContainer = document.querySelector('.progress-container');
        const progress = document.querySelector('.progress');
        const currentTimeDisplay = document.querySelector('.current-time');
        const durationTimeDisplay = document.querySelector('.duration-time');
        const audioPopup = document.querySelector('.audio-popup');
        const audioSource = document.getElementById('audio-source');
        const seekBar = document.getElementById('seek-bar');
        const volumeBar = document.getElementById('volume-bar');
        const shuffleBtn = document.querySelector('.shuffle-btn');
        const loopBtn = document.querySelector('.loop-btn');
        const audioTitle = document.getElementById('audio-title');

        let currentAudioIndex = 0;
        let isShuffle = false;
        let isLoop = false;
        let audioUrl = '';

        function showPlayer(url, title) {
            audioUrl = url;
            loadAudio(audioUrl);
            audioTitle.textContent = title;
            audioPopup.style.display = 'flex';
        }

        function loadAudio(url) {
            audioSource.src = url;
            audio.load();
            audio.play();
            playPauseBtn.classList.remove('fa-play');
            playPauseBtn.classList.add('fa-pause');
        }

        function togglePlayPause(button) {
            if (audio.paused) {
                audio.play();
                button.classList.remove('fa-play');
                button.classList.add('fa-pause');
            } else {
                audio.pause();
                button.classList.remove('fa-pause');
                button.classList.add('fa-play');
            }
        }

        function updateProgress() {
            const progressPercent = (audio.currentTime / audio.duration) * 100;
            progress.style.width = `${progressPercent}%`;
            seekBar.value = progressPercent;
            currentTimeDisplay.textContent = formatTime(audio.currentTime);
            durationTimeDisplay.textContent = formatTime(audio.duration);
        }

        function seekAudio() {
            const seekTime = (seekBar.value / 100) * audio.duration;
            audio.currentTime = seekTime;
        }

        function adjustVolume() {
            audio.volume = volumeBar.value;
        }

        function formatTime(time) {
            const minutes = Math.floor(time / 60);
            const seconds = Math.floor(time % 60);
            return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }

        function closePlayer() {
            audioPopup.style.display = 'none';
            audio.pause();
            playPauseBtn.classList.remove('fa-pause');
            playPauseBtn.classList.add('fa-play');
        }

        function prevAudio() {
            // Implement previous audio functionality if needed
        }

        function nextAudio() {
            // Implement next audio functionality if needed
        }

        function toggleShuffle() {
            isShuffle = !isShuffle;
            shuffleBtn.classList.toggle('active', isShuffle);
        }

        function toggleLoop() {
            isLoop = !isLoop;
            loopBtn.classList.toggle('active', isLoop);
            audio.loop = isLoop;
        }

        audio.addEventListener('timeupdate', updateProgress);
        seekBar.addEventListener('input', seekAudio);
        volumeBar.addEventListener('input', adjustVolume);
        audio.addEventListener('ended', () => {
            if (!isLoop) nextAudio();
        });
    </script>
</body>
</html>

EP Note:

  1. Mengambil data audio dari API:
    • Menggunakan file_get_contents untuk mengambil data dari API https://quran-api.santrikoding.com/api/surah/{nomor}.
    • Memeriksa apakah audio ada di dalam data yang dikembalikan oleh API.
  2. Menambahkan elemen audio:
    • Menampilkan elemen audio jika audio_url tersedia, sehingga pengguna dapat memutar audio.
  3. Menambahkan kontrol audio:
    • Elemen audio HTML sudah menyediakan kontrol play/pause.
Audio Title
0:00 / 0:00
Next Post Previous Post