Вставить аудио mp3 без использования Flash - PullRequest
6 голосов
/ 16 марта 2011

Какой хороший способ встраивать аудио mp3 в html-страницу, не используя flash, но с пользовательским скином?также это должно работать, частично, также в старых браузерах

Ответы [ 4 ]

5 голосов
/ 16 марта 2011

Вы должны взглянуть на SoundManager 2 .

Он использует HTML5, если браузер поддерживает его, но при необходимости снизит использование флэш-памяти.Замечательно то, что у него есть один API, который работает одинаково в любом случае.Я использовал этот инструмент в нескольких проектах, и это удивительно.

Вот описание их Как это работает страница

Проблема: Браузерам не хватает хорошей, последовательной поддержки родного аудио.(Аудио () HTML 5 - это будущее, но оно все еще находится в разработке.)

Решение: API-интерфейс JavaScript с использованием HTML5 Audio () + безголовая Flash через ExternalInterface, работает практически везде.Если HTML5 поддерживается, но «несвободные» форматы MP3 / MP4 не поддерживаются, флэш-память используется в качестве запасного варианта.

SoundManager 2 переносит и расширяет API-интерфейсы Flash и HTML Audio Sound, обеспечивая единый унифицированный звукAPI для Javascript;API-интерфейс один и тот же, независимо от того, используется ли HTML или Flash для воспроизведения звука.(Флэш-часть скрыта, прозрачна как для разработчиков, так и для конечных пользователей.)

1 голос
/ 11 мая 2011

Я создал JQuery Sound Plugin, который основан на статье Томаса Фукса, упомянутой выше jessegavin. Вы можете найти его на https://github.com/thebentarrow/JQuery-Sound-Plugin

Пожалуйста, используйте, злоупотребляйте и вносите свой вклад!

1 голос
/ 17 марта 2011

Я только что натолкнулся на эту статью Томаса Фукса , в которой рассказывается о нескольких способах воспроизведения аудио через Javascript без использования флэш-памяти.

Вот основные пункты статьи .

Мобильные браузеры
Пока нет решения, если только звук не будет воспроизведен как результат действия пользователя (щелчок)

Браузеры с поддержкой элемента HTML5 <audio>.
Требуется предоставить аудио в трех разных форматах.

if("Audio" in window){
  var a = new Audio();
  if(!!(a.canPlayType && a.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, '')))
    a.src = "/sounds/ping.ogg";
  else if(!!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')))
    a.src = "/sounds/ping.mp3";
  else if(!!(a.canPlayType && a.canPlayType('audio/mp4;     codecs="mp4a.40.2"').replace(/no/, '')))
    a.src = "/sounds/ping.m4a";
  else
    a.src = "/sounds/ping.mp3";

  a.autoplay = true;
  return;
}

Если вы имеете дело с IE <9 </strong>

<bgsound src="/sounds/ping.mp3" loop="1" autostart="autostart">

В противном случае протестируйте поддержку QuickTime, RealPlayer и Windows Media
Следующий код написан с Prototype.js

// this code uses Prototype.js
if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('QuickTime') != -1 }))
  Sound.template = new Template('<object id="sound_#{track}_#{id}" width="0" height="0" type="audio/mpeg" data="#{url}"/>');
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('Windows Media') != -1 }))
  Sound.template = new Template('<object id="sound_#{track}_#{id}" type="application/x-mplayer2" data="#{url}"></object>');
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('RealPlayer') != -1 }))
  Sound.template = new Template('<embed type="audio/x-pn-realaudio-plugin" style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>');
1 голос
/ 16 марта 2011

Если вы хотите использовать его в более старом браузере, вам необходимо предоставить запасной вариант Flash.Вы можете сделать это, например, с помощью jPlayer .jPlayer поддерживает:

  • HTML5: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm
  • Flash: mp3, m4a (AAC),m4v (H.264)

Имейте в виду, что Firefox не имеет встроенной поддержки MP3, поэтому, если вы используете аудио в формате HTML5, вы также должны предоставить Ogg Vorbis для Firefox и некоторых других браузеров.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...