Встраивание медиаплеера в сайт с использованием HTML

Что я хочу сделать, так это вставлять музыкальные файлы на веб-сайт (есть что-то вроде небольшого mp3-плеера на сайте). Я хочу, чтобы аудитория могла воспроизводить, останавливать и т.д. Песни с помощью пользовательских контроллеров.

Как мне написать эти кнопки, чтобы все они работали нормально?

Ответ 1

Вы можете использовать множество вещей.

Если вы любитель стандартов, вы можете использовать <audio> HTML5:

Вот официальная спецификация W3C для аудио тега.

Использование:

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <!-- The next two lines are only executed if the browser doesn't support MP4 files -->
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

jsFiddle здесь.

Или, если вы хотите поддерживать более старые браузеры, вы можете использовать многие бесплатные аудио флеш-плееры. Такие как:
- Dewplayer
- MP3-плеер (скучное название... верно? :))
- Веб-сайт музыкального плеера (еще скучнее... верно?)
- Zanorg Player

Примечание: я не уверен, какие из них лучшие, так как я никогда не использовал (пока).

ОБНОВЛЕНИЕ: Как уже упоминалось в другом ответе на комментарий, вы используете XHTML 1.0 Transitional. Возможно, вы сможете заставить <audio> поработать с каким-нибудь хаком.

ОБНОВЛЕНИЕ 2: Я только что вспомнил другой способ воспроизведения звука. Это будет работать в XHTML !!! Это полностью соответствует стандартам.

Вы используете этот JavaScript:

var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);

Это мой ответ на другой вопрос.

ОБНОВЛЕНИЕ 3: Чтобы настроить элементы управления, вы можете использовать что-то вроде этого.

Ответ 2

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

http://caniuse.com/#feat=audio

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

<audio controls src="intro.mp3">
   <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>

Вы можете найти эти примеры и дополнительную информацию об аудиоэлементе по следующей ссылке:

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

Наконец, хорошей новостью является то, что mozilla April dev Derby относится к этому элементу, чтобы, вероятно, собирать множество отличных примеров того, как максимально использовать этот элемент:

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

Ответ 3

Вот решение сделать доступный аудиоплеер с действительным xHTML и неинтрузивным javascript благодаря W3C Web Audio API:

Что делать:

Если браузер умеет читать, мы выводим элементы управления
Если браузер не умеет читать, мы просто визуализируем ссылку на файл

Прежде всего, мы проверяем, реализует ли браузер API веб-аудио:

if (typeof Audio === 'undefined') {
    // abort
}

Затем мы создаем объект Audio:

var player = new Audio('mysong.ogg');

Затем мы можем проверить, способен ли браузер декодировать этот тип файла:

if(!player.canPlayType('audio/ogg')) {
    // abort
}

Или даже если он может воспроизводить кодек:

if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
    // abort
}

Тогда мы можем использовать player.play(), player.pause();

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

Вы можете проверить, как это работает на моей демонстрационной странице (извините, но текст на французском языке: p)

Просто нажмите на ссылку, чтобы играть, и нажмите еще раз, чтобы сделать паузу. Если браузер может прочитать его изначально, он будет. Если он не может, он должен загрузить файл.

Это лишь небольшой пример, но вы можете улучшить его, чтобы использовать любой элемент вашей страницы в качестве кнопки управления или генерировать "на лету" с помощью javascript... Что бы вы ни хотели.

Ответ 4

<html>

<head>
  <H1>
      Automatically play music files on your website when a page loads
    </H1>
</head>

<body>
  <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0">
  </embed>
</body>

</html>

Ответ 5

Если вы используете HTML 5, есть элемент <audio>.

Вкл MDN:

Элемент audio используется для вставки звукового контента в документ HTML или XHTML. Аудио-элемент был добавлен как часть HTML5.

Update:

Чтобы воспроизводить аудио в браузере в версиях HTML до 5 (включая XHTML), вам нужно использовать один из многих флеш-аудиоплееров.

Ответ 6

Я обнаружил, что либо IE, либо Chrome захлебнулись в большинстве из них, или им нужны внешние библиотеки. Я просто хотел воспроизвести MP3, и я нашел страницу http://www.w3schools.com/html/html_sounds.asp очень полезной.

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="horse.mp3">
</audio>

Работал для меня в браузерах, которые я пробовал, но в это время у меня не было некоторых старых.