Что играло на радиостанции Максимум

Просим ChatGPT написать простые сервисы, которые могут пригодиться в работе и смотрим, что в итоге получится. Запросы пишем максимально простым и понятным языком.

Запрос шестой. Сегодня будет довольно интересно:

Напиши, сервис, который отображает, что именно играло на радиостанции Максимум за определнный период времени. Используй php; css; html и bootstrap 5. Описание api доступно по ссылке: https://docs.hostingradio.ru/books/metadannye/page/api-dlia-raboty-s-istoriei-stancii . Для радиостанции Максимум мы будем использовать запрос следующего формата https://meta.hostingradio.ru/rmg/maximum/history?date=2025-03-25&from=10:00&to=14:00&format=native . Пользователь переходит на сайт и может выбрать дату с помощью календаря и период времени с по. В результате, выводим список композиций, которые играли за указанный период времени. Для построения списка используем следующие поля: startTime - время, когда композиция играла; artist - исполнитель; title - название композиции; album - альбом; coverImageWebpUrl600 - постер композиции; spotify_popularity - рейтинг композиции на Spotify; вывести кнопками ссылки, где можно прослушать композицию - youtubeUrl; itunesUrl; spotifyUrl (если ссылки доступны). Сделай современный интерфейс, с красивыми блоками, используй градиент. Цветовая палитра: #F266CD; #010E26; #63F287; #D3F263

Вы можете сразу перейти по ссылке и посмотреть результат.

Размышления системы:

Показать / Скрыть текст

Результат:

Ниже приведён полный пример реализации сервиса с использованием PHP, HTML, CSS и Bootstrap 5. Код представляет собой единый файл (например, index.php), который выводит форму для выбора даты и периода, запрашивает данные через API и отображает список композиций с информацией, кнопками для перехода на YouTube, iTunes и Spotify, а также с мини-плеером для предпрослушивания (если ссылка доступна).

*от плеера отказался. убрал вручную.

<?php
// index.php

// Если GET-параметры не заданы, используем текущую дату и интервал за последние 30 минут
$date = isset($_GET['date']) && $_GET['date'] !== '' ? $_GET['date'] : date('Y-m-d');
$to   = isset($_GET['to']) && $_GET['to'] !== '' ? $_GET['to'] : date('H:i');
$from = isset($_GET['from']) && $_GET['from'] !== '' ? $_GET['from'] : date('H:i', strtotime("-30 minutes"));

$tracks = [];
$error = '';

// Запрос к API
$apiUrl = "https://meta.hostingradio.ru/rmg/maximum/history?date=$date&from=$from&to=$to&format=native";
$json = @file_get_contents($apiUrl);
if ($json !== false) {
    $tracks = json_decode($json, true);
    // Фильтрация: оставляем только композиции, у которых присутствует поле 'artist'
    if ($tracks && is_array($tracks)) {
        $tracks = array_filter($tracks, function($track) {
            return isset($track['artist']) && !empty($track['artist']);
        });
    }
} else {
    $error = "Ошибка получения данных с API";
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>История Радиостанции Максимум</title>
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* Градиентный фон и цвета из палитры:
       #F266CD, #010E26, #63F287, #D3F263 */
    body {
      background: linear-gradient(135deg, #010E26, #F266CD);
      color: #fff;
      min-height: 100vh;
    }
    .header-title {
      margin-top: 30px;
      margin-bottom: 30px;
      text-align: center;
    }
    .card {
      background: rgba(255, 255, 255, 0.1);
      border: none;
      margin-bottom: 20px;
    }
    .card-title, .card-text {
      color: #D3F263;
    }
    .btn-custom {
      background-color: #63F287;
      border: none;
      margin-right: 5px;
    }
    .btn-custom:hover {
      background-color: #4fbf73;
    }
    .form-control, .form-select {
      background-color: rgba(255, 255, 255, 0.2);
      border: none;
      color: #fff;
    }
    .form-control:focus, .form-select:focus {
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      box-shadow: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="header-title">История Радиостанции Максимум</h1>
    <form method="GET" class="row g-3 justify-content-center mb-5">
      <div class="col-md-3">
        <label for="date" class="form-label">Дата</label>
        <input type="date" class="form-control" id="date" name="date" value="<?= htmlspecialchars($date) ?>">
      </div>
      <div class="col-md-2">
        <label for="from" class="form-label">От</label>
        <input type="time" class="form-control" id="from" name="from" value="<?= htmlspecialchars($from) ?>">
      </div>
      <div class="col-md-2">
        <label for="to" class="form-label">До</label>
        <input type="time" class="form-control" id="to" name="to" value="<?= htmlspecialchars($to) ?>">
      </div>
      <div class="col-md-2 align-self-end">
        <button type="submit" class="btn btn-custom w-100">Показать</button>
      </div>
    </form>

    <?php if (!empty($error)): ?>
      <div class="alert alert-danger"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <?php if (!empty($tracks)): ?>
      <?php foreach ($tracks as $track): ?>
        <div class="card p-3">
          <div class="row g-0">
            <?php if (!empty($track['coverImageWebpUrl600'])): ?>
              <div class="col-md-3">
                <img loading="lazy" src="<?= htmlspecialchars($track['coverImageWebpUrl600']) ?>" class="img-fluid rounded-start" alt="Постер">
              </div>
            <?php endif; ?>
            <div class="<?= empty($track['coverImageWebpUrl600']) ? 'col-md-12' : 'col-md-9' ?>">
              <div class="card-body">
                <h5 class="card-title"><?= htmlspecialchars($track['artist'] . ' - ' . $track['title']) ?></h5>
                <p class="card-text"><strong>Альбом:</strong> <?= htmlspecialchars($track['album']) ?></p>
                <p class="card-text"><strong>Время:</strong> <?= htmlspecialchars($track['startTime']) ?></p>
                <?php if (!empty($track['spotify_popularity'])): ?>
                  <p class="card-text"><strong>Рейтинг Spotify:</strong> <?= htmlspecialchars($track['spotify_popularity']) ?></p>
                <?php endif; ?>
                <div class="mb-2">
                  <?php if (!empty($track['youtubeUrl'])): ?>
                    <a href="<?= htmlspecialchars($track['youtubeUrl']) ?>" target="_blank" class="btn btn-custom">YouTube</a>
                  <?php endif; ?>
                  <?php if (!empty($track['itunesUrl'])): ?>
                    <a href="<?= htmlspecialchars($track['itunesUrl']) ?>" target="_blank" class="btn btn-custom">iTunes</a>
                  <?php endif; ?>
                  <?php if (!empty($track['spotifyUrl'])): ?>
                    <a href="<?= htmlspecialchars($track['spotifyUrl']) ?>" target="_blank" class="btn btn-custom">Spotify</a>
                  <?php endif; ?>
                </div>
                <?php if (!empty($track['previewUrl'])): ?>
                  <audio controls style="width: 100%;">
                    <source src="<?= htmlspecialchars($track['previewUrl']) ?>" type="audio/m4a">
                    Ваш браузер не поддерживает элемент audio.
                  </audio>
                <?php endif; ?>
              </div>
            </div>
          </div>
        </div>
      <?php endforeach; ?>
    <?php else: ?>
      <div class="alert alert-info">Записей не найдено за указанный период.</div>
    <?php endif; ?>
  </div>
  <!-- Bootstrap 5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Объяснение кода

PHP-обработка данных:
При отправке формы передаются параметры даты, времени «от» и «до». Затем формируется URL запроса к API (например, https://meta.hostingradio.ru/rmg/maximum/history?date=2025-03-25&from=10:00&to=14:00&format=native). Полученный JSON парсится в массив, который затем используется для построения списка композиций.
HTML и форма:
Форма содержит элементы выбора даты и времени с использованием элементов <input type="date"> и <input type="time">. При нажатии кнопки «Показать» данные передаются методом GET.
Отображение данных:
Для каждой композиции создаётся блок-карта Bootstrap, в котором выводятся:

Время воспроизведения (startTime)
Исполнитель и название (artist, title)
Альбом (album)
Постер (coverImageWebpUrl600) – если доступен
Рейтинг Spotify (spotify_popularity) – если доступен
Кнопки для перехода по ссылкам (youtubeUrl, itunesUrl, spotifyUrl) – если ссылки присутствуют
Мини-плеер с предпрослушиванием (previewUrl) – если ссылка доступна

Стилизация:
Стили оформлены с использованием градиентного фона и цветовой палитры, что делает интерфейс современным и ярким.

Этот пример можно сохранить как index.php на вашем сервере, после чего он будет работать как самостоятельное приложение для отображения истории проигрываний радиостанции «Максимум».

Что было сделано еще?

Фильтрация данных. Убрал элементы, у которых нет поля artist - это скрыло рекламу и вставки:
После декодирования JSON данные фильтруются с помощью array_filter. Функция проверяет наличие и непустоту поля artist. Если поле отсутствует, композиция исключается из вывода.
Lazy Loading изображений. Не понравилась скорость загрузки картинок. Была произведена оптимизация, чтобы картинки грузились постепенно:
Добавление атрибута loading="lazy" к тегу <img> позволяет браузеру загружать изображения по мере их появления в области видимости, что снижает нагрузку на страницу при большом количестве элементов.

Микро IT с ChatGPT

Root от 25-03-2025, 15:07

Что играло на радиостанции Максимум

Похожее

Оставить комментарий