MP3-плеер на ActionScript и JavaScript

У меня была задача интегрировать mp3-плеер на несколько сайтов. При этом для каждого сайта плеер должен был выглядеть по-своему.
Возиться с готовыми плеерами не хотелось, интереснее было написать свой.

При выборе технологии я остановился на 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 комментариев

Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.