MP3-плеер на ActionScript и JavaScript
У меня была задача интегрировать mp3-плеер на несколько сайтов. При этом для каждого сайта плеер должен был выглядеть по-своему.
Возиться с готовыми плеерами не хотелось, интереснее было написать свой.
При выборе технологии я остановился на Flex’е.
Опыт работы с ним у меня был равен нулю, но пробежавшись по документации от Adobe, выяснилось, что ничего сложного там нет.
Скачивать Flex Builder не хотелось, да и возиться с составлением интерфейса плеера в незнакомой среде тоже.
После некоторых размышлений в голову пришла мысль, что было бы здорово интерфейс плеера отделить от него самого и реализовать на html.
В документации по ActionScript нашлась возможность обмена данными со сторонними технологиями(JavaScript’ом в моем случае) — ExternalInterface.
Я скачал Flex SDK 4.
Нашел в сети пару примеров программ, написанных на Flex, чтобы ознакомиться с синтаксисом.
В итоге получился минималистичный плеер, который стал моей первой работой на ActionScript.
Создаем файл MP3Player.as с содержанием:
Компилируем код с нужными опциями и получаем MP3Player.swf[1,5кб].
А в JavaScript будет всего лишь 2 функции для обмена данными с flash-приложением:
Конечно, это только каркас, который несложно доработать до полнофункционального плеера.
Надеюсь, кому-нибудь будет полезен этот пример.
Спасибо за внимание.
Неопрятный пример: тут
Скачать архив с исходником можно: тут [8,5кб]
Документация по Flex
Справочник по ActionScript® 3.0
Возиться с готовыми плеерами не хотелось, интереснее было написать свой.
При выборе технологии я остановился на Flex’е.
Опыт работы с ним у меня был равен нулю, но пробежавшись по документации от Adobe, выяснилось, что ничего сложного там нет.
Скачивать Flex Builder не хотелось, да и возиться с составлением интерфейса плеера в незнакомой среде тоже.
После некоторых размышлений в голову пришла мысль, что было бы здорово интерфейс плеера отделить от него самого и реализовать на html.
В документации по ActionScript нашлась возможность обмена данными со сторонними технологиями(JavaScript’ом в моем случае) — ExternalInterface.
Я скачал Flex SDK 4.
Нашел в сети пару примеров программ, написанных на Flex, чтобы ознакомиться с синтаксисом.
В итоге получился минималистичный плеер, который стал моей первой работой на ActionScript.
Создаем файл MP3Player.as с содержанием:
package { // Импортируем нужные библиотеки и классы import flash.external.ExternalInterface; // Библиотека для работы со сторонними интерфейсами(в данном случае JavaScript) import flash.media.*; // Работа с медиа ресурсами import flash.net.*; // Клас MP3 плеера public class MP3Player { // Локальные переменные private var sound_resource:Sound; // Ресурс мелодии private var sound_channel:SoundChannel; private var sound_location:String; // Путь до мелодии private var sound_position:Number = 0; // В какой позиции нажали на паузу private var sound_playing:Boolean = false; // Проигрывается в данный момент звук или нет // Константы класса private const BUFFER_TIME:Number = 10; // Размер аудио-буффера в секундах // Конструктор public function MP3Player() { // Проверяем возможность работы с JavaScript if( ExternalInterface.available ) { // Добавляем функцию обратного вызова для реакции на комманды из JavaScript ExternalInterface.addCallback( "send", from_js ); } } // Отправляем какое-то значение в JavaScript private function to_js( value:String ):void { if( ExternalInterface.available ) { // Вызываем функцию JavaScript, со значением аттрибута value ExternalInterface.call( "from_flash", value ); } } // Принимаем комманду от JavaScript // value:String - значение из JavaScript private function from_js( value:String ):void { // Разбиваем строку var commands:Array = value.split( ":" ); switch( commands[ 0 ] ) { // Выбор mp3 case "select": this.sound_play( commands[ 1 ] ); break; // Проигрываем mp3 case "play": this.sound_play( sound_location ); break; // Ставим на паузу case "pause": this.sound_pause(); break; // Останавливаем case "stop": this.sound_stop(); break; // Установка громкости(0-100) case "volume": this.set_volume( commands[ 1 ] ); break; // Возвращаем текущий уровень громкости case "get_volume": this.to_js( this.get_volume().toString() ); break; } } // Проигрываем мелодию private function sound_play( location:String ):void { if( location != sound_location ) { // Останавливаем предыдущую мелодию, если она была this.sound_stop(); // Записываем новый адрес мелодии sound_location = location; // Создаем звуковой контекст, для возможности буферизации звука var loader_context:SoundLoaderContext = new SoundLoaderContext( BUFFER_TIME, false ); // Url мелодии var url_request:URLRequest = new URLRequest( sound_location ); // Инициализируем новый объект sound_resource = new Sound(); // Инициализируем загрузку мелодии sound_resource.load( url_request, loader_context ); } // Воспроизводим мелодию sound_channel = sound_resource.play( sound_position, 0, null ); sound_playing = true; } // Ставим мелодию на паузу private function sound_pause():void { if( sound_playing ) { // Запоминаем позицию на которой остановились sound_position = sound_channel.position; // Останавливаем воспроизведение sound_channel.stop(); sound_playing = false; } } // Останавливаем мелодию private function sound_stop():void { if( sound_playing ) { // Останавливаем звук sound_channel.stop(); // Позицию в файле сбрасываем на нулевую sound_position = 0; // Закрываем аудио-ресурс sound_resource.close(); sound_playing = false; } } // Устанавливаем громкость private function set_volume( volume:Number ):void { if( volume > 100 ) { volume = 100; } if( volume < 0 ) { volume = 0; } if( sound_playing ) { var sound_transform:SoundTransform = sound_channel.soundTransform; sound_transform.volume = volume / 100; sound_channel.soundTransform = sound_transform; } } // Возвращаем громкость private function get_volume():Number { if( sound_playing ) { var sound_transform:SoundTransform = sound_channel.soundTransform; return sound_transform.volume * 100; } return 0; } } import MP3Player; new MP3Player(); }
Компилируем код с нужными опциями и получаем MP3Player.swf[1,5кб].
mxmlc --strict=true --static-link-runtime-shared-libraries=true --file-specs=C:\Path_to_source\js-as-mp3\MP3Player.as
А в JavaScript будет всего лишь 2 функции для обмена данными с flash-приложением:
function to_flash( value ) { var flash = navigator.appName.indexOf( "Microsoft" ) != -1 ? window[ "mp3player" ] : document[ "mp3player" ]; flash.send( value ); } function from_flash( value ) { alert( value ); }
Конечно, это только каркас, который несложно доработать до полнофункционального плеера.
Надеюсь, кому-нибудь будет полезен этот пример.
Спасибо за внимание.
Неопрятный пример: тут
Скачать архив с исходником можно: тут [8,5кб]
Полезные ресурсы:
Flex Developer CenterДокументация по Flex
Справочник по ActionScript® 3.0
0 комментариев