Воспроизведение WAV-аудио. Освоение HTML5 тега audio
Воспроизведение WAV-аудио
Платформа.NET Framework имеет небогатую историю поддержки звука. Версии 1.0 и 1.1 не предлагали никакого управляемого способа воспроизведения аудио, а когда долгожданная поддержка, наконец, появилась в.NET 2.0, она была представлена в форме не приводящего в восторг класса SoundPlayer (который можно найти в "малонаселенном" пространстве имен System.Media). Класс SoundPlayer довольно ограничен: он может воспроизводить только файлы в формате WAV, не поддерживает воспроизведения одновременно более одного звука и совсем не предоставляет возможностей управления никакими аспектами воспроизведения аудио (например, громкостью и балансом).
Чтобы получить эти возможности, разработчики, использующие Windows Forms, вынуждены были работать с библиотекой неуправляемого кода quartz.dll. Библиотека quartz.dll - ключевая часть DirectX, и она присутствует в проигрывателе Windows Media и операционной системе Windows. (Тот же компонент известен под названием DirectShow, а предыдущие версии назывались ActiveMovie.)
Класс SoundPlayer поддерживается в приложениях WPF. Если смириться с его существенными ограничениями, то можно сказать, что он предлагает наиболее простой и легкий способ добавления работы с аудио в приложения. Класс SoundPlayer также упаковывается в класс SoundPlayerAction. который позволяет воспроизводить звук через декларативный триггер (вместо написания нескольких строк кода C# в обработчике событий). В следующих разделах будет представлен краткий обзор обоих классов, а затем уже описания более мощных WPF-классов MediaPlayer и MediaElement.
Класс SoundPlayer
Чтобы воспроизвести звук с помощью класса SoundPlayer, понадобится выполнить перечисленные ниже шаги:
Создать экземпляр SoundPlayer.
Указать звуковое содержимое, установив либо свойство Stream , либо свойство SoundLocation . Если есть объект Stream, содержащий звук в формате WAV, используйте свойство Stream. Если же есть путь к файлу или URL, указывающий на файл WAV, применяйте свойство SoundLocation.
Если аудио-содержимое хранится в виде двоичного ресурса и встроено в приложение, то потребуется доступ к нему в виде потока и использование свойства SoundPlayer.Stream. Причина в том, что SoundPlayer не поддерживает синтаксис упакованных URL в WPF.
Установив свойство Stream или SoundLocation, можно заставить SoundPlayer в действительности загрузить аудиоданные, вызвав метод Load() или LoadAsync(). Метод Load() наиболее прост - он останавливает выполнение кода до тех пор, пока весь звуковой фрагмент не будет загружен в память. LoadAsync() выполняет свою работу в другом потоке и по завершении инициирует событие LoadCompleted.
Формально использовать Load() или LoadAsync() не обязательно. Экземпляр SoundPlayer загружает аудиоданные по мере необходимости, когда вызывается метод Play() или PlaySync(). Однако явно загрузить аудио-фрагмент - хорошая идея; это не только позволит снизить накладные расходы при многократном воспроизведении, но также упростит обработку исключений, связанных с файловыми проблемами, отдельно от исключений, вызванных причинами, относящимися к процессу воспроизведения.
После этого можно вызвать PlaySync() , который приостановит код на время воспроизведения аудио-фрагмента, или же применить Play() для воспроизведения в другом потоке, обеспечивая интерфейсу приложения способность реагировать на действия пользователя. Единственный другой доступный вариант - это метод PlayLooping() , воспроизводящий аудио-фрагмент асинхронно в бесконечном цикле (что идеально для саундтреков). Чтобы остановить текущее воспроизведение в любой момент, необходимо вызвать метод Stop() .
В следующем фрагменте кода демонстрируется простейший подход к загрузке и асинхронному воспроизведению аудиофайла:
SoundPlayer sp = new SoundPlayer(); sp.SoundLocation = "tada.wav"; sp.Load(); sp.PlayLooping()
До сих пор в коде предполагалось, что аудиофайл присутствует в том же каталоге, что и скомпилированное приложение. Однако загружать SoundPlayer-аудио из файла не обязательно. Для коротких звуков, которые воспроизводятся в нескольких местах приложения, возможно, разумнее встроить звуковые файлы непосредственно в скомпилированную сборку в виде двоичных ресурсов (не путайте их с декларативными ресурсами, определяемыми в коде разметки XAML). Эта техника работает со звуковыми файлами так же хорошо, как и с графическими изображениями.
Например, если добавить файл ding.wav как ресурс по имени Ding (просто перейдите к узлу Properties --> Resources (Свойства --> ресурсы) в окне Solution Explorer и воспользуйтесь поддержкой визуального конструктора), то можно будет применить следующий код для его воспроизведения:
SoundPlayer player = new SoundPlayer(); player.Stream = Properties.Resources.Ding; player.Play();
Класс SoundPlayer не слишком хорошо работает с большими аудиофайлами, поскольку он должен загрузить в память весь файл целиком. Может показаться, что данную проблему можно разрешить, разбив большой аудиофайл на куски, однако класс SoundPlayer не предназначен для этого. Не существует простого способа такой синхронизации SoundPlayer, чтобы он мог воспроизвести множество аудиофрагментов друг за другом, поскольку он не обеспечивает никаких средств для организации очередей. Всякий раз, когда вызывается метод PlaySound() или Play(), текущее воспроизведение останавливается. Обходные пути возможны, но намного лучше вместо этого воспользоваться классом MediaElement.
Класс SoundPlayerAction
Класс SoundPlayerAction позволяет более удобно использовать класс SoundPlayer. Класс SoundPlayerAction унаследован от TriggerAction, который позволяет использовать его в ответ на любое событие.
Ниже приведена разметка кнопки, применяющей SoundPlayerAction для подключения события Click к звуку. Триггер организован так, что его можно применить к множеству кнопок (если перенести его в коллекцию Resources):
При использовании SoundPlayerAction звук всегда воспроизводится асинхронно.
С появлением достаточно быстрого соединения с сетью Интернет, Flash был единственным инструментом для воспроизведения звуков на веб-сайтах. Но HTML5 в корне изменит способ воспроизведения звуков в Интернет. В этой статье я хочу подробно рассказать Вам о том, как использовать тег на ваших сайтах.
Используем
Ниже приведен простейший пример использования тега, он загружает mp3 файл и воспроизводит его. Обратите внимание на атрибут autopaly , который используется для автоматического воспроизведения звука. Тем не менее Вам не следует автоматически воспроизводить звуки а сайте, ведь это надоедает пользователям.Воспроизведение звука в цикле
Хотите зациклить звук? Атрибут loop поможет Вам это сделать. Но опять же, не стоит злоупотреблять автозапуском и воспроизведением в цикле, если не хотите, чтобы пользователь преждевременно покинул сайт.Отображение элементов управления
Вместо того, чтобы играть звуки автоматически, что, безусловно, плохая практика, вы должны позволить отображать в браузере некоторые элементы управления, такие как громкость и кнопки воспроизведение (пауза). Это сделать легко, просто добавив атрибут controls .Различные форматы файлов
Тег поддерживается большинством современных браузеров, но проблема в том, что разные браузеры поддерживают разные форматы файлов. Safari, например, может проигрывать MP3, а Firefox не может, и играет OGG-файлы вместо этого. Решение этой проблемы заключается в использовании обоих форматов, чтобы каждый посетитель мог услышать звук, независимо от того, какой браузер он использует.Указываем MIME-тип файлов
При использовании различных форматов файлов, хорошей практикой есть указывание MIME-типа для каждого файла, чтобы помочь браузеру локализировать поддерживаемый им файл. Это легко можно сделать используя атрибут type .Для старых браузеров
А что, если посетитель использует IE6 или какой-то другой доисторический браузер, который не поддерживает тег? Все легко: ниже приведён код, который будет отображать сообщение для браузеров, которые не поддерживают тег.Буферизация файлов
При воспроизведении файлов большого размера может использоваться буферизация файлов. Для этого вы можете использовать атрибут preload . Он может принимать 3 значения:- none - если вы не хотите использовать буфер файлов;
- auto - если вы хотите, чтобы браузер беферизировал файл целиком;
- metadata - для загрузки лишь служебной информации (продолжительность звучания и др.).
Управление воспроизведением через JavaScript
Управлять HTML5 аудио-проигрывателем через JavaScript очень легко. Следующий пример показывает, как с использованием JavaScript можно построить свои базовые элементы управления аудио-плеером:Вот и всё на сегодня.
Надеюсь, что эта статья помогла Вам понять базовые возможности HTML5 тега .
Razor Pages in ASP.NET Core allow you to build page focused web applications using simple page based programming model. If you worked with Razor Pages before you are probably aware that by default you can handle requests using methods such as OnGet(), OnPost(), OnPut(), and OnDelete(). This means a form POSTed to the server needs to be handled using only one action - OnPost(). At times, however, you need to have multiple actions to deal with the same HTTP verb. A common scenario is when you have multiple submit buttons on a form.
Consider the following example that shows such a form.
As you can see, the Index.cshtml page has three submit buttons housed inside a form. And you want to handle each button different. By default, clicking on any of these three buttons will trigger OnPost() action. How to wire three different handlers instead of the default handler? To accomplish this you need to use the asp-page-handler attribute of the tag helpers. Have a look at the following mark that shows the above form:
Notice the code shown in bold letters. The input elements have asp-page-handler attribute set to certain values. This attribute decides the action from the page model that will be handling the form submission. The asp-page-handler attribute basically emits formaction HTML attribute in the browser. Also notice that the input elements also have asp-route-sessioncount attribute. This attribute sets a route value that is then supplied to the corresponding handler method. Specifying asp-route-* is, of course, optional. Form fields are made available to the handler methods through model binding as usual (also see my earlier article ).
Ok. So far so good. Now it"s time to write those handler actions as mentioned in the asp-page-handler attributes. Open the page model class (Index.cshtml.cs) and write the following actions into it:
Public void OnPostYogaPostures(int sessionCount) { //do your work here ViewData["message"] = $"Your request for {sessionCount} sessions in Yoga Postures is being processed."; } public void OnPostMeditation(int sessionCount) { //do your work here ViewData["message"] = $"Your request for {sessionCount} sessions in Kriya and Meditation is being processed."; } public void OnPostRestorativeYoga(int sessionCount) { //do your work here ViewData["message"] = $"Your request for {sessionCount} sessions in Restorative Yoga is being processed."; }
Notice the action naming convention. Since we want to handle POST requests we prepend all the action names (asp-page-handler name) with "OnPost". Thus we have OnPostYogaPostures, OnPostMeditation, OnPostRestorativeYoga. Also notice that all the handlers have sessionCount parameter. This parameter will come from the asp-route-sessioncount attribute we assigned earlier.
Set a breakpoint in each of these methods and run the application. You will find that clicking on a button takes the control to the corresponding page handler.
That"s it for now! Keep coding !!
Bipin Joshi is a software consultant, trainer, author, yoga mentor, and spiritual guide having 24+ years of experience in software development, consulting, and training. He conducts instructor-led online training courses in ASP.NET Core, ASP.NET MVC, and Design Patterns for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click .
Button (Кнопка), LinkButton (Кнопка-ссылка) и ImageButton (Кнопка-изображение)Серверные элементы управления Button, LinkButton и ImageButton в ASP.NET 2.0, события Click и Command
Элементы управления, представляющие кнопки (Button , LinkButton и ImageButton ) ткже относятся к числу наиболее часто используемых. Набор свойств и событий у них очень похож. Основное отличие между ними заключается в том, как данная кнопка будет показана на Web -странице. Различия между ними наглядно показаны на рис. 4.5.3-1.
Рис. 4.5.3-1 Элементы управления Button , LinkButton и Imagebutton
В дальнейшем речь у нас будет идти про элемент управления Button , однако все возможности этого элемента управления применяются и к элементам управления LinkButton и ImageButton .
Самый простой вариант кода HTML для серверной кнопки ASP .NET может выглядеть как
< asp : Button ID =" Button 1" runat =" server " Text =" Button " />
Кнопки в формах ASP .NET разделяются на две большие категории: кнопки Submit и кнопки Command . Во внешнем представлении различий между кнопками разных типов нет. Различается только их поведение: при нажатии на кнопку типа Submit на сервер просто передается содержимое элементов управления формы, а при нажатии на кнопку типа Command на сервере должна выполниться событийная процедура Command для данной кнопки. В данной событийной процедуре при помощи объекта CommandEventArgs можно получить информацию о значении свойства Command и использовать его при выполнении событийной процедуры.
По умолчанию все кнопки в формах ASP .NET относятся к типу Submit . Чтобы отнести их к типу Command , достаточно просто заполнить информацию о имени команды при помощи свойства CommandName . После этого для данной кнопки можно будет использовать, помимо стандартного события Click , еще и событие Command . Обычно кнопки типа Command используются тогда, когда функциональности обычных кнопок Submit не хватает (например, нужно настроить взаимодействие родительского и вложенного элементов управления).
Главное свойство элемента управления Button , помимо CommandName - свойство Text , которое определяет надпись на кнопке. Другие важные свойства представлены ниже:
· CausesValidation - определяет, будет ли после нажатия этой кнопки производится проверка значений, введенных пользователем. По умолчанию для этого свойства устанавливается значение true , и проверка производится. Для некоторых кнопок (например, для кнопки Reset ) проверку введенных пользователем значений необходимо отключить, установив для этого свойства значение False ;
· Enabled - возможность включить или отключить кнопку (например, можно отключить ее до того момента, пока пользователь не заполнит все необходимые текстовые поля);
· OnClientClick - это свойство позволяет определить имя скрипта, который должен быть выполнен в броузере клиента при нажатии на эту кнопку;
· PostBackUrl - это свойство позволяет определить, какая страница будет отправлена пользователю в броузер после того, как будет нажата данная кнопка;
· UseSubmitBehavior - по умолчанию для этого свойства установлено значение True , что значит: отправлять информацию на сервер, используя стандартный механизм отправки информации, встроенный в броузер. Если установить для этого свойства значение false , то подсистема ASP .NET автоматически сгенерирует для этой кнопки клиентский скрипт, который будет заниматься отправкой информации (такое решение называется ASP .NET postback mechanism ). Этот способ можно использовать, если необходимо обеспечить дополнительную функциональность при отправке данных с клиента на сервер.
· ValidationGroup - при помощи этого свойства можно определить группу элементов управления, для которых значения будут проверяться при нажатии данной кнопки. Это свойство удобно использовать тогда, когда форма большая и удобнее проверять значения, вводимые пользователем, по частям.
К гланым событиям кнопок, как уже говорилось, относятся Click и Command .
