Как встроить аудио в веб-сайт?

Я искал ответ на протяжении веков, и я не могу найти то, что мне нужно.

Я никогда не кодировал ничего, связанного с аудио.

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

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

I нужно только кодировать HTML и CSS (php, java и т. д. остаются для других). Что бы вы посоветовали мне сделать, чтобы создать эту функцию на шаблоне?

спасибо =)

П. С.

Я должен использовать XHTML 1.0 переходный

13
audio embed html music player

6 ответов

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

  • если вы наркоман стандартов, вы можете использовать HTML5 <audio> tag:

вот официальная спецификация 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 здесь.

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

обновление: как уже упоминалось в другом комментарий ответа, вы используете переходный XHTML 1.0. Возможно, вы сможете получить <audio> для работы с некоторыми hack.

обновление 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: To настройки управления, вы можете использовать что-то вроде этой.

25

определенно, элемент 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>

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

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

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

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

4

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

что делать :

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

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

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

тогда мы инстанцируем

1
<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>
1

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

On MDN:

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

обновление:

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

0

Я обнаружил, что 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>

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

0