Search
Write a publication
Pull to refresh

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
Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.