Проблема воспроизведения аудиофайла по клику на кнопку в jQuery

Быстрый ответ

Для того, чтобы воспроизвести аудио при нажатии на кнопку с помощью jQuery, вы можете использовать следующий код:

// HTML: Ваш аудиофайл
<audio id="audio" src="your-audio.mp3"></audio>
// HTML: Кнопка "Воспроизвести"
<button id="play">Воспроизвести</button>

// jQuery: Запуск воспроизведения
$('#play').click(function() { $('#audio')[0].play(); });

Просто подключите ваш аудиофайл "your-audio.mp3" и нажмите на кнопку #play для его воспроизведения.

Обеспечение готовности воспроизведения аудио

Для проверки готовности аудиотрека к воспроизведению воспользуйтесь кодом ниже:

// Проверка готовности аудио к воспроизведению
$('#audio').on('canplay', function() {
  console.log("Аудио готово к воспроизведению!");
});

Готовность воспроизведения аудио мы обеспечиваем при помощи события canplay.

Управление множеством аудиофайлов

Если вам нужно управлять множеством аудиофайлов, вам поможет следующий код:

// Создание нового элемента аудио
var audio = new Audio();
audio.src = 'your-audio.mp3';
audio.id = 'audioClone';
$('body').append(audio);

$('#play').click(function() { $('#audioClone')[0].play(); });

Создание динамических <audio> элементов предоставляет более гибкий контроль.

Управление процессом воспроизведения аудио

Можно осуществлять управление процессом воспроизведения аудио: остановить аудио, сбросить время воспроизведения и начать воспроизведение заново:

// Остановка воспроизведения и сброс времени трека
$('#stop').click(function() {
  var audio = $('#audio')[0];
  audio.pause();             // Останавливает воспроизведение
  audio.currentTime = 0;     // Сбрасывает время воспроизведения
});

// Автоматический повтор трека после его завершения
$('#audio').on('ended', function() {
  this.currentTime = 0;     // Сброс времени воспроизведения
  this.play();              // Запуск воспроизведения заново
});

Визуализация

Нажатие на кнопку "Воспроизвести" аналогично запуску иглы на виниловой пластинке:

$('#playButton').click(function() {
  $('audio#myTune')[0].play();  // Мелодия начинает звучать
});

Сравнение до и после нажатия:

До: [🔳🔇]
После: [▶️🎶]

Обеспечиваем совместимость с различными браузерами

Чтобы аудиофайлы корректно воспроизводились в различных браузерах, используйте несколько форматов:

<audio id="audio">
  <source src="your-audio.mp3" type="audio/mpeg">
  <source src="your-audio.ogg" type="audio/ogg">
</audio>
<button id="play">Воспроизвести</button>

И проверьте поддерживаемый формат с помощью canPlayType():

if ($('#audio')[0].canPlayType('audio/mpeg')) {
  // Воспроизводите трек
} else {
  // Обновите ваш браузер
}

Так ваше аудио будет воспроизводиться без сбоев в любом браузере.

Предзагрузка аудиофайлов

Для моментального воспроизведения аудиофайлов лучше предварительно их загрузить:

// Предзагрузка аудио
$('#audio').attr('preload', 'auto');
// Запустите предзагрузку
$('#audio')[0].load();

Таким образом, ваши аудиофайлы будут моментально готовы к воспроизведению.

Информирование пользователей о текущем времени воспроизведения

Оповещайте пользователей о текущем времени воспроизведения аудио:

// Уведомление о текущем времени воспроизведения
$('#audio').on('timeupdate', function() {
  $('#currentTime').text(this.currentTime);    // Время воспроизведения: 2:00/4:00
});

Таким образом, пользователи всегда будут в курсе текущего состояния воспроизведения аудио.

Полезные материалы

1. click event | jQuery API Documentation — документация по методу .click() в jQuery.
2. Javascript Audio Play on click – Stack Overflow — обсуждение вопроса воспроизведения аудио при клике на Stack Overflow.
3. HTMLAudioElement – Web APIs | MDN — документация по элементу <audio> от MDN.
4. Video and audio content – Learn web development | MDN — управление видео и аудио контентом с помощью MDN.
5. Getting started with Web Audio API | Articles | web.dev — введение в Web Audio API.
6. GitHub – jplayer/jPlayer: jPlayer : HTML5 Audio & Video for jQuery — jPlayer, плагин для воспроизведения аудио и видео в jQuery.