Пример кода веб-музыкального проигрывателя HTML5

В этой статье представлен пример кода веб-музыкального проигрывателя HTML5, и мы делимся им со всеми подробностями:

Теги audio и video были представлены в HTML5, что позволяет нам воспроизводить аудио и видео напрямую, без использования других плагинов. Далее мы воспользуемся тегом audio H5 и связанными с ним атрибутами и методами для создания простого музыкального проигрывателя. В основном он включает в себя следующие функции:

1. Воспроизведение паузы, предыдущей песни и следующей песни.

2. Отрегулируйте громкость и индикатор выполнения воспроизведения.

3. Переключить текущую песню по списку.

Сначала посмотрим на конечный результат:

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

 <audio id=music1>Браузер не поддерживает тег audio<source src=media/Beyond - The Glorious Years.mp3></source></audio><audio id=music2>Браузер не поддерживает тег audio <source src=media /Daniel Power - Free Loop.mp3></source></audio><audio id=music3>Браузер не поддерживает тег audio<source src=media/Джей Чоу, Фэй Юйцин – Тысячи миль отсюда.mp3></source></audio>

Список воспроизведения ниже также соответствует трем аудиотегам:

 <div id=playList> <ul> <li id=m0>Годы за гранью славы</li> <li id=m1>Петля Дэниела без энергии</li> <li id=m2>Джей Чоу, Фэй Юйцин- Тысяча миль снаружи</li> </ul></div>

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

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

 var music1= document.getElementById(music1);var music2= document.getElementById(music2);var music3= document.getElementById(music3);var mList = [music1,music2,music3];

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

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

 function playMusic(){if(flag&&mList[index].paused){ ​​mList[index].play(); document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index) .style .color = белый;progressBar(); playTimes(); play.style.backgroundImage = url(media/pause.png); флаг = ложь;}else {mList[index].pause(); флаг = true; play.style.backgroundImage = url(media/play.png);}}

Приведенный выше код вызывает несколько функций, среди которых play и Pause — это методы, поставляемые с тегом audio, а другие функции определяются нами. Давайте посмотрим, как реализованы эти функции и каким функциям они соответствуют.

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

 function ProgressBar(){var lenth=mList[index].duration;timer1=setInterval(function(){ cur=mList[index].currentTime;//Получить текущее время воспроизведения Progress.style.width=+parseFloat(cur/ длина)*300+px; ProgressBtn.style.left= 60+parseFloat(cur/lenth)*300+px;},10)}

Ниже приведена функция изменения времени воспроизведения. Здесь мы настраиваем функцию синхронизации и выполняем ее время от времени, чтобы изменить время воспроизведения. Поскольку полученная нами продолжительность песни рассчитывается в секундах, нам нужно использовать оператор if, чтобы преобразовать оценку продолжительности и изменить время воспроизведения для отображения в минутах и ​​секундах.

 function playTimes(){timer2=setInterval(function(){ cur=parseInt(mList[index].currentTime);//Секунды var минуту=parseInt(cur/60); if (минута<10) { if(cur% 60 <10){ playTime.innerHTML=0+минута+:0+cur%60+ }else{; playTime.innerHTML=0+минута+:+cur%60+; } } else{ if(cur%60<10){ playTime.innerText= минута+:0+cur%60+ }else{ playTime.innerText= минута+:+; кур%60+; } } },1000);}

Далее завершим функции регулировки хода воспроизведения и регулировки громкости через индикатор выполнения.

Функция настройки хода воспроизведения реализована с помощью объекта события. Поскольку атрибут offsetX доступен только в событиях IE, для просмотра эффекта рекомендуется использовать браузер IE. Сначала добавьте прослушиватель событий в индикатор выполнения. При щелчке мыши по индикатору выполнения определяется положение мыши, и текущий прогресс воспроизведения рассчитывается на основе позиции, разделенной на общую длину индикатора выполнения, а затем на основе позиции, разделенной на общую длину индикатора выполнения. песня установлена.

 //Регулируем ход воспроизведения total.addEventListener(click,function(event){var e = event || window.event;document.onmousedown = function(event){ var e = event || window.event; var mousePos1 = e. offsetX var maxValue1 = total.scrollWidth; mList[index].currentTime = (mousePos1/300)*mList[index].duration; Progress.style.width = mousePos1+px; ProgressBtn.style.left = 60+ mousePos1 +px;}})

Ниже приведена функция регулировки громкости. Мы используем перетаскивание для регулировки громкости. Идея состоит в том, чтобы добавить мониторинг событий к шарику кнопки на панели громкости, а затем вычислить положение шарика кнопки относительно общей шкалы громкости. перетаскиваемая позиция Наконец, в соответствии с расчетом. Результат умножается на объем, чтобы получить текущий объем:

 volBtn.addEventListener(mousedown,function(event){var e = event || window.event;var that =this;//Предотвратить событие перетаскивания мяча по умолчанию e.preventDefault();document.onmousemove = function(event){ var e = событие || window.event;var mousePos2 = e.offsetY;var maxValue2 = vol.scrollHeight;if(mousePos2<0){ mousePos2 = 0;}if(mousePos2>maxValue2){ mousePos2=maxValue2;}mList[index].volume = (1-mousePos2/maxValue2);console.log(mList[index] ].volume);volBtn.style.top = (mousePos2)+px;volBar.style.height = 60-(mousePos2)+px;document.onmouseup = функция (событие) { document.onmousemove = null; document.onmouseup = null;}}})

Наконец, мы реализуем более сложную функцию переключения песен.

Давайте сначала рассмотрим использование кнопок «Предыдущая» и «Далее» для переключения. Есть несколько проблем, на которые следует обратить внимание при переключении музыки: во-первых, нам нужно остановить воспроизводимую в данный момент музыку и переключиться на следующую музыку, во-вторых, индикатор выполнения и воспроизведение; время должно быть очищено и пересчитано, в-третьих, информация о песне должна измениться соответствующим образом, а также должен измениться стиль плейлиста под плеером; Выяснив три вышеуказанных пункта, мы можем приступить к реализации функции.

 //Функция предыдущей песни prevM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();--index;if(index==-1){ index=mList.length - 1;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = url(media/pause.png);}} //Функция следующей песни nextM(){clearInterval(timer1);clearInterval(timer2);stopM();qingkong();cleanProgress();++index;if(index = =mList.length){ index=0;}clearListBgc();document.getElementById(m+index).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;changeInfo(index);mList[index].play();progressBar();playTimes();if (mList[index].paused) { play.style.backgroundImage = url(media/play.png);}else{ play.style.backgroundImage = URL(media/pause.png);}}

Код ниже переключает песни, щелкая по списку.

 m0.onclick = function (){clearInterval(timer1);clearInterval(timer2);qingkong();flag = false;stopM();index = 0;pauseall();play.style.backgroundImage = url(media/pause. png);clearListBgc();document.getElementById(m0).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play();cleanProgress();progressBar();changeInfo(index);playTimes();}m1.onclick = function () {clearInterval(timer1);clearInterval(timer2);flag = false;qingkong();stopM();index = 1;pauseall();clearListBgc();play.style.backgroundImage = url(media/pause.png);document.getElementById(m1).style.backgroundColor = #A71307;document.getElementById(m+index).style. цвет= белый;mList[index].play();cleanProgress();changeInfo(index);progressBar();playTimes();}m2.onclick = function (){clearInterval(timer1);clearInterval(timer2);flag = false ;qingkong();stopM();index = 2;pauseall();play.style.backgroundImage = url(media/pause.png);clearListBgc();document.getElementById(m2).style.backgroundColor = #A71307;document.getElementById(m+index).style.color = white;mList[index].play() ;cleanProgress();changeInfo(index);progressBar();playTimes();}

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

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

Первый — переключить информацию о песне:

 functionchangeInfo(index){if (index==0) { musicName.innerHTML = Glory Days; Singer.innerHTML = Beyond;}if (index==1) { musicName.innerHTML = Free Loop; Singer.innerHTML = Дэниел Паутер; }if (index==2) { musicName.innerHTML = Тысячи миль отсюда; Singer.innerHTML = Джей Чоу, Фэй Юйцин;}}

Затем очистите оба таймера:

 //Устанавливаем индикатор выполнения на 0 function cleanProgress(timer1){if(timer1!=undefined){clearInterval(timer1);}progress.style.width=0;progressBtn.style.left=60px;} function qingkong(timer2) { if (timer2!=undefined){clearInterval(timer2);}}

Остановите воспроизведение музыки и возобновите воспроизведение.

 функция stopM(){if(mList[index].played) {mList[index].pause(); mList[index].currentTime=0; flag=false;}}

Наконец, измените стиль плейлиста ниже:

 functionclearListBgc(){document.getElementById(m0).style.backgroundColor = #E5E5E5;document.getElementById(m1).style.backgroundColor = #E5E5E5;document.getElementById(m2).style.backgroundColor = #E5E5E5;document.getElementById (m0).стиль.цвет = черный;document.getElementById(m1).style.color = черный;document.getElementById(m2).style.color = черный;}

На данный момент мы в основном завершили работу над музыкальным проигрывателем. Давайте посмотрим на эффект анимации:

Автор: Джерри Эдьюкейшн

Источник: http://www.cnblogs.com/jerehedu/

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