JQuery и SoundManger не играют красиво
Я только что посмотрел, используя JQuery и SoundManger2, и заметил, что SoundManager имеет проблемы в определенных ситуациях, когда используется JQuery. И это также зависит от того, используется ли Firefox (3.6.13) или IE(8.0.7600).
Все, что я пытаюсь проверить, это погода, могу я играть звук или нет. В каждом примере я сначала покажу код, а после кода я буду определять, были ли IE и FireFox успешными или неудачными.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
</script>
</head>
<body>
</body>
</html>
IE: успех; FireFox: успех
В следующем коде все то же самое, за исключением того, что я добавил конфигурацию для SoundManager в загрузку документа JQuery.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$(function () {
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
});
</script>
</head>
<body>
</body>
</html>
IE: успех; FireFox: Fail
Изменен порядок ссылок на скрипты JQuery и SoundManger
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/soundmanager2.js"></script>
<script type="text/javascript">
$(function () {
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
});
</script>
</head>
<body>
</body>
</html>
IE: Fail; FireFox: успех
Если бы все, что я делал, делал статичные веб-страницы, это не было бы проблемой. Я создаю код в asp.net MVC, используя слои и тому подобное, и порядок загрузки вещей не имеет значения. Вот как я изначально наткнулся на эту проблему.
Поскольку я новичок в JQuery и SoundManger, есть очень хорошая вероятность, что я делаю что-то не так. Если у кого-то есть какие-либо комментарии о том, как сделать это лучше, я бы оценил любые ответы. Я долго бился головой о клавиатуру, прежде чем понял это и надеюсь, что это поможет кому-то еще.
Обновить
Когда звук не воспроизводится, я получаю следующую информацию от SoundManager2
- Не удалось загрузить SoundManager 2 (ошибка безопасности / загрузки) -
soundManager.disable(): выключение
soundManager: не удалось инициализировать.
soundManager: убедитесь, что /Project/PublicWebSite/Scripts/swf/soundmanager2.swf является допустимым путем.
soundManager: Нет отклика Flash в течение ожидаемого времени. Возможные причины: возможно, произошла ошибка при загрузке soundmanager2_debug.swf (и / или Flash 8+ отсутствует?), Блокировка Flash или ошибка безопасности JS-Flash. Смотрите вывод SWF для дополнительной информации отладки.
soundManager: теряю терпение, все еще жду Flash...
soundManager:: initMovie (): Ожидание вызова ExternalInterface из Flash.
soundManager:: initMovie (): получил элемент EMBED (созданный с помощью JS)
soundManager:: createMovie (): Попытка загрузки./soundmanager2_debug.swf
- SoundManager 2 V2.97a.20110123 (AS2/Flash 8), нормальный опрос -
В Firebug и Fiddler я заметил, что когда я получаю эту ошибку, SoundManger пытается найти soundmanager2_debug.swf @ /project/PublicWebSite/static/. Проблема в том, что мои SWF-файлы не находятся там. Здесь находится мой HTML-файл.
Обновить
Саймон, это указало мне в правильном направлении. Мне не нужно было ничего менять в файле soundmanger2.js, как упоминалось на http://www.schillmania.com/projects/soundmanager2/doc/getstarted/.
Я просто удаляю ссылку на скрипт SoundManger и динамически загружаю скрипт, используя ajax-вызов JQuery.
<html>
<head>
<title></title>
<script type="text/javascript" src="/Project/PublicWebSite/Scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: '/Project/PublicWebSite/Scripts/soundmanager2.js',
dataType: 'script',
success:
{
soundManager.debugMode = true;
soundManager.defaultOptions.volume = 50
soundManager.debugFlash = true; // enable flash debug output for this page
soundManager.url = '/Project/PublicWebSite/Scripts/swf/soundmanager2.swf';
soundManager.flashVersion = 8; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
//enable HTML5 audio support, if you're feeling adventurous. iPad/iPhone will always get this.
//soundManager.useHTML5Audio = true;
soundManager.onready(function () {
soundManager.createSound('helloWorld', '/Project/PublicWebSite/Content/Sounds/Chime.mp3');
soundManager.play('helloWorld');
});
}
});
});
</script>
</head>
<body>
</body>
</html>
IE: успех; FireFox: успех
BarDev
2 ответа
Проблема здесь не в использовании jquery, а в том, что вы привязываете конфигурацию Soundmanager2 к событию, готовому к DOM. Soundmanager2 также привязывает свои процедуры загрузки к этому событию, поэтому, если ваш код конфигурации не выполняется до тех пор, пока это событие не произойдет, это может быть уже слишком поздно, в зависимости от того, в каком порядке браузер вызывает эти обработчики событий.
Я не эксперт SM2 (никогда не использовал его), но я только что наткнулся на функцию "отложенной загрузки" менеджера, которая может помочь, так как она должна позволить вам отложить процесс загрузки Soundmanager2 и явно загрузить его после Код конфигурации был назван: http://www.schillmania.com/projects/soundmanager2/doc/getstarted/
Недавно я выпустил платформу аудиоплеера, которая использует SoundManager2 и интегрирует w/ jQuery как $.fn. - очень прост в использовании и / или настройке.. похож на jPlayer в дизайне внешнего интерфейса, но с дополнительными возможностями воспроизведения (например, потоковое RTMP, полная поддержка HTML5), примерами, тестами и т. д.: