Воспроизвести музыку в Rails

Question

У меня есть приложение, которое позволяет пользователям загружать музыку, но у меня возникли проблемы с настройкой проигрывателя, который позволяет им воспроизводить музыку.

На странице пользователя, это упрощенный пример его/ее лучших треков:

<% @top_tracks.each do |track| %> 
    <div class="top-track"> 
    <button class="btn-play"> 
     <i class="icon-play"></i> 
    </button> 
    <span><%= track.title %></span> 
    </div> 
<% end %> 

Каждый трек имеет несколько свойств, в том числе, но не ограничиваясь: title (само за себя), album_id (каждый трек принадлежит альбому), file_url (URL-адрес файла MP3 для трека) и album_position (заказ трека в альбоме).

Я бы хотел, чтобы у вас была возможность щелкнуть по кнопке .btn-play для каждой дорожки и выполнить соответствующее воспроизведение звука. В идеале у меня также будет выделенный проигрыватель в нижней части страницы с полным контролем для паузы, поиска, регулировки громкости и отображения информации, воспроизводимой в настоящее время.

упрощенная версия этого игрока будет выглядеть следующим образом:

<div class="player"> 
    <button class="play"> 
    <i class="icon-play"></i> 
    </button> 
    <button class="pause"> 
    <i class="icon-pause"></i> 
    </button> 
    <div> 
    <div class="now-playing">[currently playing track title would go here]</div> 
    <div class="seekbar"></div> 
    </div> 
    <div> 
    <button class="mute"> 
     <i class="icon-mute"></div> 
    </button> 
    </div> 
</div> 

Я не слишком знаком с JavaScript, или как использовать такие методы, как .play() или .pause(). Я просмотрел mediaelement_rails gem, но я не уверен, что это было бы полезно в этом случае. Подводя итог, как бы я подключить дорожки, так что:

1) при нажатии на кнопку .btn-play он играет трек

2) Информация трека будет заполнить соответствующую информацию в плеере

3) элементы управления игрока будут управлять воспроизводимой в данный момент дорожкой

Answer 1

Если вы хотите полнофункциональный плеер, значит, mediaelement.js - отличный способ, так как у него есть запасные игроки для старых браузеров. Обратите внимание, что вам не нужно использовать рельсы, это, по сути, только оболочка для самого js. Это зависит от вас и того, как вы хотите, чтобы ваши активы приложения использовались/хранились/вызывались.

Для BASIC выход html5 аудио, это то, что я:

1. Создание кнопки с атрибутом данных исходного файла
2. Используйте JQuery, чтобы захватить событие щелчка, когда пользователь нажимает на кнопку
3. построить тэг аудио с использованием данных атрибута URL-адрес с включенной опцией автозапуска (так он начинает играть, как только он загружен)

таким образом, для примера кода:

<button class="audioplay au-<%= upload.id %> btn btn-default" data-audiofile="/music.mp3"> 
    Play Now 
</button> 

<script> 
    $(".audioplay").on("click", function(){ 
    var source = $(this).data("audiofile"); 
    var player = '<audio class="audioplayer" src="'+source+'" controls autoplay></audio>'; 
    $(this).after(player); 
    }); 
</script> 

Очевидно, что это действительно очень голые кости ... это не защищает от щелкать воспроизведения несколько раз, или удаление любых других игроков, когда выбрана другая песня, но те вещи, которые вы можете обрабатывать в JavaScript ,

Answer 2

В дополнение к использованию audio_tag, как предлагал Antarr Byrd, вы можете использовать Javascript для управления носителем как described here.

Например, вы можете использовать следующее:

<%= audio_tag @track.path, id: 'player' %> 

<button id="play">Play</button> 
<button id="pause">Pause</button> 

С этим сопровождающим Javascript:

$('#play').click(function() { 
    $('#player').get(0).play(); 
    }); 

    $('#pause').click(function() { 
    $('#player').get(0).pause(); 
    }); 

Единственное, что следует отметить, что в случае моего примера, @track.path относится к названию файла в каталоге /public/audios/.