А знаете ли вы, что программа Multimedia Builder специально "заточена" для работы с mp3 и имеет для этого почти все необходимые средства? Вот мы и попробуем сегодня "сконструировать" собственный mp3-плеер.
В принципе, можно "слепить" mp3-плеер за 30-40 секунд. "Зачем же тогда эта статья?" - спросите вы. Действительно, если бы всё было так просто, то её и не было бы. И сейчас я вам это докажу.
Итак, сделаем плеер за 40 секунд (описание займет, конечно, побольше, но ваша работа уложится именно в это время).
Это специальная метка, придающая текстовому объекту свойства "вытаскивать" имя исполнителя из ID3-тэга мр3-файла. Да, еще замените слова Double-Click here... в окне на слово Исполнитель.
Всё. Ваш мр3-плеер готов. Нажмите клавишу F5, чтобы проверить его работу. У вас должно получиться приблизительно следующее:
Теперь нажмите кнопочку "Открыть" и загрузите в ваш плеер несколько мр3-файлов. Сразу должно начаться воспроизведение, а в текстовые объекты загрузится информация об исполнителе, названии песни (только если эта информация есть в мр3-файлах!), общем и текущем времени звучания. Но! Плейлист остался пустым! Где же названия песен?
И это не первое разочарование, ожидающее вас. Дождитесь окончания первой песни (или перемотайте её ближе к концу; кнопка перемотки осуществляет перемещение по треку с интервалом 10 секунд). Вот началась следующая песня. Но куда же делись сведения об исполнителе и композиции? И цифры почему-то больше не показывают время, а молча остаются на нуле...
А теперь я вас спрошу: устраивает вас такой плеер? Если да, то можете покинуть эту страницу. А если нет - поехали дальше :)))
Теперь наберитесь терпения и пройдите весь урок до конца. А в качестве награды вас ждет непередаваемое ощущение радости творчества! (А уж если вы совсем нетерпеливы, можете посмотреть, что у нас получится в итоге всей работы).
Прежде всего реанимируем наш плеер, чтобы убедиться в его работоспособности.
Сначала зайдите в свойства плейлиста, нажмите кнопку "Действие" и напишите там такой скрипт (скрипт нужно написать на вкладке Double Click):
Ничего не поделаешь, придется пока обойтись без объяснений. Просто без этого скрипта вы не сможете запускать проигрывание файлов по двойному щелчку в плейлисте. Сразу оговорюсь, что скрипт этот, как и все последующие кроме тех, что мы будем создавать сами, написан автором программы Multimedia Builder (Roman Voska).
Кроме того, чтобы плейлист работал, в проекте должны присутствовать еще два объекта - это текстовые объекты с метками CBK_NumInList и CBK_CurItemList (это так называемые CBK-константы. Когда-нибудь мы рассмотрим все константы в отдельном уроке). Четыре текстовых объекта с CBK-метками у нас в проекте уже присутствуют: два из них служат для вывода времени, а два - для показа информации о песне. Как можно догадаться из названия меток, указанные в начале абзаца объекты выводят информацию об общем количестве загруженных песен (файлов) и о номере текущей проигрываемой песни. Эти два объекта будут в дальнейшем использованы в качестве параметров в некоторых скриптах, и поэтому их отсутствие в проекте сделает скрипты неработоспособными.
Итак, создайте два текстовых объекта, присвойте им указанные метки и... положите пока где-нибудь в стороне от окна проекта.
Теперь зайдём в свойства кнопки, предназначенной для загрузки мр3-файлов. В области назначения действий мы видим, что единственное действие, назначенное этой кнопке - AudioOpen. Отмените это действие, потому-что вместо него мы напишем специальный скрипт. Откройте окошко скриптов. Здесь есть две закладки: Mouse Up и Mouse Down. На закладке Mouse Up напишите следующий скрипт (можно скопировать его прямо с этой страницы):
А на закладке Mouse Down - только одну строчку:
Из текста скрипта можно понять, что он обеспечивает открытие аудио-файлов и загрузку заголовков в плейлист. Видно также, что в этом скрипте уже используется имя объекта CBK_CurItemList, который мы предусмотрительно создали.
А сейчас проверьте работу вашего проекта. Откройте несколько мр3-файлов, и... о чудо! - они загрузились в плейлист! Попробуйте запускать проигрывание разных песен путем двойного щелчка мышью по их названием в плейлисте. Срабатывает? Хорошо, это уже результат. Однако, после окончания текущей песни, когда автоматически начинается проигрывание следующей, в плейлисте не происходит "перескакивание" выделения на новую песню, а в заголовок по-прежнему не выводится информация. И индикаторы времени снова затихли...
Здесь самое время рассказать вам еще об одном объекте типа CBK, который предусмотрели разработчики программы. Это CBK-сценарий, который должен иметь метку CBK_MP3EOF. Если на странице проекта имеется сценарий с таким именем, он всегда будет запускаться после окончания проигрывания текущего мр3-файла. Таким образом, можно указать программе (плееру), что ему делать после окончания текущей песни - то ли запустить следующую, то ли послать всех и выйти из программы
Так вот, чтобы всё заработало, поместите в вашем проекте скрипт под названием CBK_MP3EOF следующего содержания:
Пока никаких комментариев по поводу этого скрипта я давать не буду - для этого нужно сначала тщательно изучить команды, доступные в Multimedia Builder. Со временем, постепенно изучая эти команды и язык скриптов, вы сами начнете все понимать. А пока наша главная задача - сделать работающий мр3-плеер.
Ну что, создали скрипт? А теперь посмотрите, как волшебным образом изменилось поведение нашего плеера! После окончания одной песни строчка выделения в плейлисте сама перескакивает на следующую, выводятся ID3-тэги и послушно отсчитывается время!
Поблагодарите себя за терпение и усидчивость, а меня - за то, что открыл вам секреты - и читайте дальше! Будет уже не так скучно.
Убедившись в полной работоспособности плеера, можно заняться улучшением его интерфейса. В первом уроке мы узнали, что в качестве фона нашего проекта можно использовать растровую картинку произвольной формы и прозрачными областями. Для этого проекта для простоты давайте обойдемся графическими средствами самой программы (а они есть, и немалые).
Для начала в окне настроек проекта установите новые размеры окна - 400 на 75 точек. Снимите флажок "Стандарт" и поставьте "Поверх всех окон". В поле "Заголовок" введите название вашего плеера, например MyPlayer. Все объекты временно отодвиньте с рабочего поля куда-нибудь в сторонку.
Зайдите в свойства страницы и в качестве фона выберите светло-голубой цвет. Затем возьмите инструмент рисования прямоугольников, нарисуйте два прямоугольника ярко-синего цвета, два - темно-синего и один - черного. В свойствах первых четырех прямоугольников в окне "Граница" укажите "Нет", а у последнего - "Утоплена". С помощью этих пяти прямоугольников создайте дизайн интерфейса плеера, у вас должно получиться что-то похожее на это:
Теперь выделите все пять прямоугольников, зайдите в меню "Упорядочение - Объединить - Объекты с фоном..." и выберите пункт "Создать новый графический объект", не забыв поставить галочку на пункте "Удалить исходные объекты". Вместо пяти прежних объектов у вас получится один, с названием BmpComb. Переименуйте его в Фон и переместите в самый нижний уровень (горячей клавишей Shift + PageDown).
К такому интерфейсу наши стандартные кнопки, конечно, не подходят. Придется нарисовать свои. (Совет - никогда не используйте стандартные кнопки программы. Только нарисованные лично вами придадут вашей работе индивидуальность и неповторимость, а к тому же, всегда будут соответствовать общей дизайнерской идее). Вот пример трёх состояний кнопки Play:
Не удаляйте старые кнопки! Просто зайдите в их свойства и загрузите вновь нарисованные вами изображения в качестве трех состояний. И переименуйте кнопки на такие названия: Open, Play, Pause, Stop, Backward и Forward. Создайте еще две кнопки с названиями Back и Next - они будут служить для перехода к следующей и предыдущей песне в плейлисте. Также сделайте кнопку с надписью "Pl" - для включения плейлиста (об этом позже) и две кнопки для управления громкостью (пока в нашем проекте громкость будет управляться ступенчато. Как сделать плавный движковый регулятор громкости, будет рассказано в отдельной статье).
Еще сделайте круглую кнопку без надписи, и поставьте их штуки три-четыре, потом они нам понадобятся. Вот что у вас примерно должно получиться:
Кнопкам Back и Next с помощью мастера скриптов задайте действие SongListPrev() и SongListNext() соответственно. (Понятно, что это команды играть предыдущую или следующую песню плейлиста). Кнопкам управления громкостью (см.рисунок) - действия и Volume без указания параметров (эти команды вы также найдете в списке Мастера сценариев). Между этими кнопками я поместил надпись "Vol" (слово "Громкость" слишком длинное :)).
Проверьте работу вашего плеера (вы не забыли, что это делается нажатием клавиши F5?). Точнее, проверить надо только работу кнопок управления воспроизведением и громкостью, так как плейлист и информационные надписи мы пока отодвинули в сторону).
А сейчас сделаем так, чтобы при нажатии кнопок громкости исчезала надпись "Vol", а вместо нее появлялось цифровое значение громкости в процентах. Создайте прямоугольник цвета фона и такого размера, чтобы он как раз закрывал надпись "Vol". Создайте поверх него текстовый объект CBK_Volume (ну да, этот объект как раз и будет выводить значение громкости в процентах), установите для него белый цвет, а в текстовом поле напишите два нуля или не пишите ничего). Сгруппируйте оба эти объекта, переименуйте группу, например, в Volume, и сделайте ее невидимой. Осталось только назначить появление этой группы в момент нажатия кнопок громкости.
Зайдите в свойства одной из этих кнопок, и выберите "Взаимодействие с другими объектами". Откроется дополнительное окно, в котором можно управлять видимостью (т.е. показом) объектов:
Как видно из развернутого списка, наряду с управлением видео (это нам пока не надо) здесь есть четыре команды, управляющие видимостью объекта (переводчик почему-то перевел только одну из них - Hide):
Show - показать объект;
Hide - скрыть объект;
Show/Hide - показать скрытый объект только на время нажатия на кнопку;
Invert - показать объект, если он был скрытым, и скрыть, если он видимый.
В данном случае нас интересует действие, которое будет происходить только при перемещении мыши по объекту (на рисунке обведено красным). Выберем команду Show/Hideи укажем объект Volume.Теперь этот объект будет виден только во время, когда мышь находится над кнопкой, а соответственно, будет отображаться значение громкости.
Проделайте то же самое со второй кнопкой громкости. Теперь можете проверить и удовлетвориться полученным результатом.
"А где же информация об исполнителе и композиции, и другие тэги?" - спросите вы. Вот этим мы сейчас и займемся.
Помните, как выводится информация о песне в плеере Winamp? Правильно, одной строчкой - сразу и исполнитель, и, через тире, название песни. А нельзя ли и нам так сделать? Можно. И даже нужно, потому-что при выводе информации непосредственно с помощью CBK-меток в программе Multimedia Builder существуют определенные проблемы.
Итак, в нашем проекте существуют объекты CBK_ID3Artist и CBK_ID3Song. Уберите их куда-нибудь подальше, но не удаляйте! А теперь создайте новый текстовый объект под названием Заголовок. Разместите его поверх черного дисплея, оставив примерно по 80 точек справа и слева (это место еще будет нужно). Выравнивание сделайте левым, с фиксированием ширины. Шрифт лучше выбрать 8-го размера, цвет на ваше усмотрение. А в текстовом поле введите что-нибудь типа "Мой первый мр3-плеер".
Для того, чтобы в этом текстовом объекте выводилась нужная нам информация об исполнителе и композиции, напишем сами специальный скрипт. Создайте объект скрипта и назовите его Вывод заголовка. А текст этого скрипта я сначала выложу здесь, а потом поясню, как он работает:
Вначале вводятся три переменные с именами Artist$, Song$ и Item$ (знак $ означает, что это строковая переменная. Строковая переменная может содержать любую буквенно-цифровую информацию). Значения этих переменных извлекаются из объектов с СВK-метками, которые присутствуют в нашем проекте. Переменная Artist$ принимает значение, соответствующее информации об исполнителе, записанной в тэге мр3-файла, переменная Song$ - информации о названии музыкальной композиции, а переменная Item$ - о номере трека в плейлисте (первые три строки в сценарии).
Далее ставится двойное условие, что если переменные Artist$ и Song$ не пустые (не равны нулю), то вводится новая переменная Merged$ (что значит "объединенная"), значение которой складывается из значений двух предыдущих и знака "тире" между ними (см.текст скрипта). Это именно то, что нам и нужно! Теперь осталось вывести эту информацию на дисплей. Что и делает следующая команда LoadText (загрузить текст). В параметрах этой команды через запятую и обязательно в кавычках указывается имя текстового объекта, в который надо загрузить информацию, и какую именно информацию загрузить. Вот и всё. В наш объект с названием Заголовок будет загружена информация, взятая из переменной Merged$, в которой как раз и содержится имя исполнителя и название композиции, записанные через тире. Ура!
В следующем условии говорится, что если значения переменных Artist$ и Song$ пусты, но тем не менее значение Item$ отлично от нуля, то это значит что? Правильно, это значит, что музыка-то в плейлисте все-таки есть, но вот тэгов в данном мр3-файле не написали, поленились. И поэтому дается команда вывести текст о том, что информация отсутствует (смело можете изменить этот текст в скрипте на другой!).
И, наконец, в последнем условии определяется, что если все переменные пусты, нет ни тэгов, ни пунктов в плейлисте, то это может свидетельствовать только об одном - что в плеер ни загрузили ни одного файла! О чем и будет выдано соответствующее сообщение (можете написать что-нибудь веселое типа "Чувак, музыку-то загрузи!").
Уф-ф, кажется, разобрались. Зато теперь у вас, надеюсь, появится хоть какой-то интерес к написанию скриптов.
Однако наш скрипт надо еще как-то активировать. Давайте откроем свойства страшного и непонятного пока скрипта CBK_MP3EOF (вы не забыли, что этот скрипт будет жить у вас всегда, когда вы захотите создать мр3-плеер?) и добавим в нём строку:
Теперь, после окончания каждой песни, вместе с запуском скрипта CBK_MP3OEF будет запускаться и наш новый скрипт. Но этого будет мало. Такую же строку добавьте и в скрипты кнопок Back и Next, чтобы при их нажатии одновременно с запуском другой песни выводилась и информация о ней. Эту же строку добавьте и в конце скрипта плейлиста, чтобы при двойном щелчке на выбранной песне появлялась и соответствующая информация. А вот для кнопки Load (открыть файлы) эту строку надо записать несколько иначе:
То есть тут скрипт будет запущен сразу после открытия файла. Во все скрипты добавляйте новую строку последней. Вытерев пот со лба, проверьте работу вашего плеера. Сразу после его запуска на дисплее появится надпись "Мой первый мр3-плеер". Теперь попробуйте нажать кнопки Play, Back или Next - и сразу увидите информацию о том, что не загружена музыка. Загрузите файлы и проверьте, корректно ли выводится информация при нажатии кнопок, а также автоматически после перехода от одной песни к другой. Если да, значит, вы всё сделали правильно. И мы можем двигаться дальше.
Возьмите объекты CBK_Time и CBK_Total и поместите их в ряд справа от заголовка - пусть отображают время звучания. А слева от заголовка создадим аудиовизуализацию - есть, оказывается, в программе такой объект.
С помощью инструмента аудиовизуализации (вы найдете его на панели инструментов) нарисуйте прямоугольную область слева от заголовка на области дисплея. Зайдите в свойства этого объекта, смените тип визуализации на "Осциллограф" и время вычисления поставьте 35 (по умолчанию 100, но это слишком медленно). Цвет выберите на свой вкус, а фон оставьте черным.
Не спешите расстраиваться, если при проверке плеера окажется, что визуализация не работает. Это такой мелкий глюк программы - визуализация иногда заводится только "с пинка". Вот поэтому две первых кнопки из четырех круглых кнопок давайте используем для переключения типа визуализации, что и будет являться этим самым "пинком".
Переключать тип визуализации с осциллограммы на спектрограмму (или эквалайзер) на самом деле очень просто. Для этого назначьте кнопкам скрипт (его можно просто выбрать с помощью Мастера сценариев):
для одной, и
для другой. Теперь, если визуализация не заводится сразу, то после нажатия этих кнопок будет переключаться и работать нормально. Вот что у нас получилось (или должно было получиться) в итоге:
Да, у нас же остались еще две круглых кнопки. Крайней справа назначьте действие Exit, а другой - Minimize (она будет сворачивать плеер в трей). Оба действия можно найти в списке внешних команд.
Вы уже ждете, когда же мы будем делать плейлист. Вот, пожалуйста.
Зайдите в окно настроек проекта и измените высоту окна с 75 на 350 точек. Это нам нужно потому, что иначе не хватит рабочей области экрана снизу для нормальной работы с объектами. Увеличенное окно должно стать голубого цвета фона (вы же назначали цвет фона?). Ну, а чтобы плеер по-прежнему запускался в окне с размерами 400х75, придется пойти на маленькую хитрость. Давайте откроем свойства страницы и зайдем в окно написания скрипта (напомню, что старт страницы, иначе говоря, запуск приложения, сразу может приводить в исполнения некоторый сценарий. Это очень удобно, в чём мы сейчас и убедимся). Вот и зададим скрипт, чтобы при старте проекта окно сразу переключалось на нужный нам размер.
В окне сценария вы не найдете команду по изменению размеров окна. Нужно выбрать пункт SysCommand, и тогда справа, в поле "Помощь", вы увидите список доступных системных команд. Это окно так устроено, что позволяет из него копировать текст. Скопируйте оттуда название команды ResizeWindow и поместите ее в поле System Command, а в поле Parameters напишите через запятую цифры 0,75. Цифра ноль означает, что размер по горизонтали менять не надо, а цифра 75 - ну, вы догадались...
Всё. Сохраните проект и нажмите F5. Вы увидите, что он волшебным образом запускается в прежнем окне.
На свободном поле снизу плеера разместите объект плейлиста. Выровняйте его по ширине с дисплеем, а внизу оставьте небольшую горизонтальную полоску, чтобы там могла уместиться строка текста. С помощью синих прямоугольников разного оттенка создайте небольшой дизайн плейлиста и уберите эти прямоугольники вниз.
Теперь нам надо сделать, чтобы плейлист появлялся при нажатии на кнопку Pl. Вот и задайте в скрипте этой кнопки команду SysCommand("ResizeWindow","0,350"). Запустите плеер, и вы увидите, что при нажатии на кнопку Pl открывается плейлист.
А как же сворачивать плейлист обратно? Давайте поступим очень просто. Скопируйте кнопку Pl и вставьте. Появится кнопка Pl1 на том же самом месте. Зайдите в ее скрипт и переправьте цифру 350 на 75. А также добавьте в скрипт обоих кнопок еще две строчки:
Кнопку Pl1 после этого надо сделать скрытой. Догадались? При нажатии кнопки Pl включается плейлист, сама эта кнопка "прячется", а зато показывается ранее скрытая кнопка Pl1, которая умеет производить прямо противоположные действия. Проверьте: теперь ваш плейлист должен включаться и отключаться. От себя замечу, что сейчас вы освоили весьма ценное свойство программы - умение изменять размер окна (положение, кстати, тоже можно изменять!).
Создайте текстовый объект Плейлист внизу под плейлистом. Его мы будем использовать для вывода информации о состоянии плейлиста. Для этого создадим скрипт под названием Статус плейлиста (у нас уже был похожий скрипт - Вывод заголовка):
Надеюсь, вы уже достаточно поумнели, чтобы самим разобраться в этом скрипте. Когда же этот скрипт должен запускаться? Во-первых, сразу после открытия плеера. Во-вторых, каждый раз при загрузке в него музыкальных файлов. А значит, нам надо добавить строку
в скрипт при старте страницы (там уже есть запись об изменении размеров окна) и в скрипт кнопки Open. Опять проверяем наш проект. Запускаем, открываем плейлист и видим там сообщение "Пусто - нечего играть". Загружаем файла и появляется надпись "Всего песен - столько-то".
Внимательно погоняв наш плеер, можно заметить в нем как минимум два недостатка, сразу бросающихся в глаза. Первое - при нажатии кнопок Back и Next хоть и запускается следующая (предыдущая) песня, а вот в плейлисте выделенная подсвеченная строчка не перескакивает вверх-вниз. А хотелось бы. И второе - нельзя удалить выбранные песни из плейлиста. Что тоже желательно. И то, и другое можно исправить. Так что продолжение след... то есть читайте дальше (если еще не устали :))!
Чтобы исправить первый досадный недостаток, придется изменить скрипт кнопок Back и Next. Сейчас у нас там записано (для кнопки Next):
а надо заменить это на:
Строковая переменная WhatSongStat$ как раз используется в скрипте CBK_MP3EOF для управления плейлистом (можете еще раз заглянуть в этот скрипт; помаленьку начнете понимать, как он устроен). И хотя скрипт CBK_MP3EOF уже должен запускать скрипт Вывод заголовка, все-таки мы эту строчку (см.выше) оставляем, так как практика показывает, что иногда двойной запуск скрипта через скрипт не срабатывает.
В скрипте для кнопки Back замените слова "Next" и "next" словами "Prev" и "prev". Теперь всё должно заработать - то есть выделение в плейлисте будет автоматически перескакивать на следующую и предыдущую песню при нажатии этих кнопок.
А вот второй недостаток устраняется с помощью размещения в проекте скрипта DeleteFromSongList, написанного автором программы. Приводим его целиком и без комментариев:
Однако чуть-чуть в этот скрипт нам придется вмешаться, добавив в него строку:
Действительно, ведь после удаления пунктов из плейлиста изменится количество песен в нем, а значит, наша строка состояния должна об этом сообщить.
В заключение можно зайти в свойства всех кнопок и ввести тексты всплывающих подсказок, если вы еще этого не сделали. Вот что у нас получилось в итоге всей работы:
Как сделать надпись, которую вы видите справа внизу плейлиста, вы уже сообразите сами.
Не хватает только информации о битрейте и частоте мр3-файла. Сделаем же этот последний штрих.
Нарисуйте горячую область высотой с дисплей плеера и длиной от объекта визуализации до индикатора времени. Название ее не важно, а вот в качестве действия ей надо назначить показ объекта Тэги, который мы сейчас создадим. Курсор для области следует изменить на Finger (палец), чтобы было понятно, что на этом месте можно щелкнуть и что-то произойдет.
Для начала нарисуйте подложку - черный прямоугольник, который бы закрывал полностью по длине объект Заголовок. Поверх него разместите в ряд текстовые объекты с CBK-метками: CBK_MP3Type, CBK_MP3Bit, CBK_MP3Freq и CBK_Channels. И опять закройте всё горячей областью, которой поручите действие скрыть объект Тэги. Теперь сгруппируйте последние шесть объектов, переименуйте группу в Тэги и сделайте ее скрытой.
Всё. Теперь по щелчку на области дисплея будет включаться/отключаться показ характеристик мр3-файла: тип, битрейт, частота сэмплирования и режим.
Осталось только скомпилировать ваш проект в ехе-файл. Как это сделать, вы знаете из предыдущего урока. Скажу только, что в окне окончательной сборки (компиляции) проекта не забудьте убедиться, что тип Проигрывателя выбран "Полный" (в программу встроен полнофункциональный "движок" для проигрывания мр3-файлов, он же встроится и в ваш исполняемый файл), а флажок "Создать autorun.inf" снят.
Ваш первый мр3-плеер готов! Если вы смогли прочитать этот урок до конца, поблагодарите себя за усидчивость, ибо то, чему мы научили вас всего в одной статье, сами вы "раскапывали" бы еще очень долго. Ну а ленивые могут просто скачать готовый файл описанного здесь проекта (8 Кб) и, бессовестно вторгаясь в мое авторство, переделать проект в соответствии со своими потребностями
Разумеется, в данной статье рассмотрены далеко не все возможности программы Multimedia Builder по созданию аудиоплееров. Нет в нашем плеере ни плавного регулятора громкости, ни полосы прокрутки трека, нет дополнительных кнопок по работе с плейлистом, а всё это программа умеет. И никто не мешает нам создать плеер с более продвинутыми возможностями, ну хотя бы такой, как показан на скрине внизу.
В следующий раз мы расскажем, как сделать движковый регулятор громкости для мр3-плеера (и не только). Так что ждите и читайте наши материалы. До встречи и творческих успехов!
Иначе не видно музыки в плейлисте когда возвращаешься на страницу с плеером