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 комментариев