Как сделать программу плеер

Хотите улучшить этот вопрос? Переформулируйте вопрос так, чтобы он был сосредоточен только на одной проблеме.

Закрыт 5 лет назад .
Надо создать аудио плеер для андроида. Если есть пример ваших решений, скидывайте ссылки на ресурсы.
Отслеживать
51.5k 195 195 золотых знаков 56 56 серебряных знаков 233 233 бронзовых знака
задан 10 дек 2017 в 10:42
Макс Хромов Макс Хромов

43 1 1 серебряный знак 9 9 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Для работы с аудио файлами вам необходим класс MediaPlayer он и занимается проигрыванием.

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

В качестве источников знаний могу посоветовать две статьи :

Отслеживать
ответ дан 10 дек 2017 в 10:52
Sviat Volkov Sviat Volkov
2,302 9 9 серебряных знаков 21 21 бронзовый знак

Как создать проигрыватель музыки на Python

Вот именно, надо всё учитывать, а я в данный момент хочу создать приложение «аудио плеер» для андроида. Круто было бы если кто нибудь показал бы свой код. И на этом примере я бы сделал свой аудио плеер. Надеюсь найдётся такие люди, которые покажут свой код для. А Вам спасибо.

Прочитаю статьи которые прикрепили.

10 дек 2017 в 11:03

во второй статье есть четкий пример от А до Я как написать рабочий плеер. И так же там ссылка на гитхаб с исходниками, в первой так же есть код, но там чисто на тему аудио.

Источник: ru.stackoverflow.com

Как сделать программу плеер

Это и все последующие изображения взяты отсюда.

Подготовка и настройка среды

Я предполагаю, что у вас есть знания о следующих технологиях:

Настройка среды проста: у вас должен быть предварительно установлен node.js для запуска команды в терминале.

Перейдите в каталог, в котором вы хотите создать проект. Теперь запустите терминал и введите приведенную ниже команду, чтобы установить react-проект .

Нажмите на кнопку воспроизведения, чтобы воспроизвести аудио.

Добавление временной шкалы аудио с текущим временем и продолжительностью аудио

Теперь давайте добавим временную шкалу в плеер. Временная шкала будет контролироваться пользователем. Любые изменения в нем изменят текущую позицию аудио.

Как создать свой медиа-плеер на C# windows forms

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

Ссылка на код
Вы можете посмотреть полный проект с кодом и выводом по ссылке.

Дополнительные возможности

Вы можете работать над музыкальным проигрывателем, чтобы добавить дополнительные функции, например:

• Приложение загружает много песен, однако в настоящее время воспроизводит только одну песню. Используйте кнопки перемотки трека для смены трека.
• Изменение названия и альбома аудио в соответствии с проигрываемой песней.
• Добавьте больше функций, которые, по вашему мнению, должен иметь музыкальный проигрыватель.

Заключение

Видеоплеер на JavaScript и HTML

В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.

Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.

Делаем видеоплеер на JavaScript:

Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент и будем брать данные о видео, менять их и выводить при необходимости.

А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.

HTML:

Для начала конечно нужно в HTML объявить элемент , с атрибутом controls , он нужен что бы уже какие то кнопки были для управления видео.

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

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

Тут в целом всё понятно, единственное скажу, что элемент с классом video-track , это видео дорожка.

Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.

CSS:

Теперь перейдём к CSS, не много изменим вид, вот вёрстка.

#videoPlayer <
width : 800px ;
width : 100% ;
.video-track <
height : 5px ;
width : 100% ;
background-color : #b6b6b6 ;
height : 5px ;
background-color : #58b4ff
padding : 5px 0 ;

В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.

JavaScript:

Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.

JavaScript
let video = document . getElementById ( «video» ) ; // Получаем элемент video
let videoTrack = document . querySelector ( «.video-track» ) ; // Получаем элемент Видеодорожки
let time = document . querySelector ( «.timeline» ) ; // Получаем элемент времени видео
let btnPlay = document . querySelector ( «.play» ) ; // Получаем кнопку проигрывания
let btnPause = document . querySelector ( «.pause» ) ; // Получаем кнопку паузы
let btnRewind = document . querySelector ( «.rewind» ) ; // Получаем кнопки перемотки назад
let btnForward = document . querySelector ( «.forward» ) ; // Получаем кнопку перемотки вперёд

Тут мы берём элемент по id остальное берём по селектору.

Дальше будем делать событие кнопок, сначала посмотрим работу с запуском видео.

JavaScript
btnPlay . addEventListener ( «click» , function ( ) <
video . play ( ) ; // Запуск проигрывания
// Запуск интервала
videoPlay = setInterval ( function ( ) <
// Создаём переменную времени видел
let videoTime = Math . round ( video . currentTime )
// Создаём переменную всего времени видео
let videoLength = Math . round ( video . duration )
// Вычисляем длину дорожки
time . style . width = ( videoTime * 100 ) / videoLength + ‘%’ ;

Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.

Внутри него создаём две переменных, videoTime отвечает за то, сколько уже секунд проигрывается видео, videoLength содержит сколько всего секунд длится видео, потом по формуле определяем сколько процентов видео прошло, и отображаем это на видео дорожке с помощью элемента с классом timeline , назначив ему этот процент в качестве ширины.

Теперь посмотрите на код нажатия на кнопку паузы.

JavaScript
btnPause . addEventListener ( «click» , function ( ) <
video . pause ( ) ; // Останавливает воспроизведение
clearInterval ( videoPlay ) // убирает работу интервала

Как видите с помощью video.pause() , останавливаем воспроизведение и потом удаляем работу интервала.

Дальше идёт код для перемотки видио, но он очень простой.

JavaScript
// Нажимаем на кнопку перемотать назад
btnRewind . addEventListener ( «click» , function ( ) <
video . currentTime -= 5 ; // Уменьшаем время на пять секунд
// Нажимаем на кнопку перемотать вперёд
btnForward . addEventListener ( «click» , function ( ) <
video . currentTime += 5 ; // Увеличиваем время на пять секунд

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

Последнее что осталось сделать, так это что бы при нажатие на видео дорожку автоматически переключалось время.

JavaScript
videoTrack . addEventListener ( «click» , function ( e ) <
let posX = e . clientX — 8 ; // Вычисляем позицию нажатия
let timePos = ( posX * 100 ) / 800 ; // Вычисляем процент перемотки
time . style . width = timePos + ‘%’ ; // Присваиваем процент перемотки
video . currentTime = ( timePos * Math . round ( video . duration ) ) / 100 // Перематываем

На мой взгляд эта самая интересная часть программы, сначала мы присваиваем переменной posX , позицию клика по «X», и вычитаем из него восемь, это нужно, так как левый отступ у нас равен восьми, а вычисляет e.clientX от размеров всего экрана.

Дальше определяем по формуле, на какой процент записи мы хотим переключится, и присваиваем это значение ширине линии таймлайна, потом точно также вычисляем сколько на какую секунду видео надо переключится, вот результат.

Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.

Вывод:

В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.

Но если вы заметили, там есть много не доработок, например, видео не делается на полный экран или не показывается сколько времени осталось до окончания.

Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.

Источник: prognote.ru