c# pdfsharp fill pdf form : Extracting data from pdf into excel control software system web page winforms windows console HTML5%20Audio%20How-To1-part1066

HTML5 Audio How-To
11
How to do it...
1.  Crack open your usual text editor and add the following code from  
the previous exercise:
<!doctype html>
<html>
<head>
<title>Audio Element Sample</title>
</head>
<body>
<h1>Audio Element Sample</h1>
<audio controls>
<source src="Helix.m4a" type="audio/mp4">
<source src="Helix.ogg" type="audio/ogg">
HTML5 audio not supported
</audio>
</body>
</html>
2.  We need to add the fallback support, so add the following code just below  
the second <source> tag:
<audio controls> 
<source src="Helix.ogg" type="audio/ogg"> 
<source src="Helix.m4a" type="audio/mp4"> 
<object type="application/x-shockwave-flash" 
data="player.swf?audioUrl=Helix.mp4&autoPlay=true"> 
<param name="movie" 
value="player.swf?audioUrl=Helix.mp4&autoPlay=true"> 
</object> 
<a href="Helix.mp4">Download the audio file</a> 
</audio>
How it works...
The principle is simple—it works on the basis that although the code may show in browsers, 
it will be ignored if the browser doesn't understand it. Here, we start with the OGG format file 
(supported by Firefox, Opera, and Chrome); if the browser doesn't understand this format, 
then it will attempt to play the MP4 format (this will likely be Chrome, Safari, or IE). If all else 
fails, then the browser will play the MP4 file as an embedded SWF or show a link to allow the 
user to download and play the file locally.
Extracting data from pdf into excel - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extracting data from pdf to excel; export pdf data to excel
Extracting data from pdf into excel - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
how to extract data from pdf file using java; online form pdf output
HTML5 Audio How-To
12
There's more...
While HTML5 audio support is still in a state of flux, it is crucial to ensure that you include 
some form of fallback support for those browsers that don't support the <audio> tags. 
Browsers will automatically ignore those tags they don't understand—the best fallback  
support to use is Flash's SWF format, as WAV is supported by browsers, but not 
recommended. It doesn't compress very well as a format, which results in large files.
Using an existing audio library (must know)
Now that we have looked at the basics of embedding audio files using the new tags, it's time 
to focus on how you can use one of the prebuilt libraries available that provide a customized 
version. We're going to take a look at one called MediaElementJS, available from http://
www.mediaelementjs.com; this is an open source library that covers both the new 
<video> and <audio> tags.
Getting ready
For this exercise, you will need to download a copy of the library and then extract the 
following files: controls.pngjquery.jsmediaelement-and-player.min.js, and 
mediaelementplayer.css. You will also need copies of your audio files, these should 
be in MP4 and OGG formats.
How to do it...
1.  Open up your favorite text editor, then copy in the code from the Embedding HTML5 
Audio task from earlier in this recipe, you should have:
<!doctype html>
<html>
<head>
<title>Audio Element Sample</title>
</head>
<body>
<h1>Audio Element Sample</h1>
<audio controls>
<source src="03 The Helix.m4a" type="audio/mp4">
<source src="03 The Helix.ogg" type="audio/ogg">
HTML5 audio not supported
</audio>
</body>
</html>
VB.NET PDF Page Extract Library: copy, paste, cut PDF pages in vb.
Detailed VB.NET Guide for Extracting Pages from Microsoft PDF Doc. Help to extract single or multiple pages from adobe PDF file and save into a new PDF file.
can reader edit pdf forms; extracting data from pdf forms
C# PDF Text Extract Library: extract text content from PDF file in
Free online source code for extracting text from adobe PDF document in C#.NET class. Enable extracting PDF text to another PDF file, TXT and SVG formats.
extract pdf data into excel; how to save a pdf form in reader
HTML5 Audio How-To
13
2.  We need to add links to the MediaElementJS library, so go ahead and modify the 
code as follows:
<title>Audio Element Sample</title>
<code>
<script src="build/jquery.js"></script>
<script src="build/mediaelement-and-player.min.js"> 
</script>
<link href="build/mediaelementplayer.css" 
rel="stylesheet" />
</code>
3.  Add the following code next, below the closing </audio> tag:
<script>
// using jQuery
$('audio').mediaelementplayer();
</script>
4.  If all is well, you should have something looking like the following screenshot:
How it works...
The key to this is that we've kept the base code untouched in terms of the <audio> 
tags—MediaElementJS is different in that it doesn't use a fallback if the browser doesn't 
understand the tags but a fallforward. It works by using a Flash file as the lowest common 
denominator, then progressively pushing to using any of the supplied audio files depending 
on the capabilities of the browser. There are other libraries available, although not all 
operate in the same way; you may want to take a look at something like Speakker  
(http://www.speakker.com), or for a more bare-bones system, try Audio.js 
(http://kolber.github.com/audiojs/).
C# PDF Image Extract Library: Select, copy, paste PDF images in C#
C# programming sample for extracting all images from PDF. // Open a document. C# programming sample for extracting all images from a specific PDF page.
extract data from pdf form fields; pdf form field recognition
C# PDF insert text Library: insert text into PDF content in C#.net
such as inserting text to PDF, deleting text from PDF, searching text in PDF, extracting text from PDF, and value, The char wil be added into PDF page, 0
extract pdf form data to xml; how to save a filled out pdf form in reader
HTML5 Audio How-To
14
There's more...
The observant amongst you will spot a problem with our code—where's the real fallback 
option? It's a good question! In order for the previous code to be really successful, you will 
need to modify it as follows, using the code from the previous exercise:
<audio> 
<source src="03 The Helix.m4a" type="audio/mp4">
<source src="03 The Helix.ogg" type="audio/ogg">
<object type="application/x-shockwave-flash" 
data="player.swf?audioUrl=myAudio.mp3&autoPlay=true"> 
<param name="movie" 
value="player.swf?audioUrl=myAudio.mp3&autoPlay=true">
</object> 
<a href="myAudio.mp3">Download the audio file</a> 
</audio>
Building a basic audio player in jQuery 
(become an expert)
In the previous task, we took a look at using a prebuilt library to provide the audio 
functionality—while this works well, there is one downside: you are limited to the styling that 
comes by default with the library, which may not necessarily fit in with your site's style. We're 
going to fix that. In this task and the next, we will look at the code required to produce your 
own custom player using the MediaElementJS backend functionality.
Getting ready
For this task, you will need the same files as you had from the previous exercise—this includes 
the jQuery library, the MediaElementJS files, and your audio files.
How to do it...
1.  Let's begin by setting up the basic framework. Go ahead and copy the following code 
into a new document and save it as audiodemo.html:
<!doctype html>
<html>
<head>
<title>Audio Element Sample</title>
<code>
</code>
VB.NET PDF Text Extract Library: extract text content from PDF
Enable extracting PDF text to another PDF file, and other formats such as TXT and SVG form. OCR text from scanned PDF by working with XImage.OCR SDK.
pdf form save with reader; how to fill pdf form in reader
VB.NET PDF Image Extract Library: Select, copy, paste PDF images
Sample for extracting all images from PDF in VB.NET program. Sample for extracting an image from a specific position on PDF in VB.NET program.
exporting pdf form to excel; java read pdf form fields
HTML5 Audio How-To
15
</head>
<body>
</body>
</html>
2.  We need to start adding our JavaScript library calls, so go ahead and add this into 
your <head> tags:
<script src="https://ajax.googleapis.com/ajax/libs/
jquery/1.7.2/jquery.min.js"></script>
<script src="js/mediaelement-and-player.js"></script>
<link href="css/stylenew.css" rel="stylesheet" type="text/
css" />
3.  Next comes the HTML framework for the audio player. Add the following, immediately 
after the opening <body> tag:
<div class="audio-player">
<h1>Robert Vadney - The Helix</h1>
<img class="cover" src="img/vespera.jpg" alt="">
<audio id="audio-player" controls="controls">
<source src="media/Helix.m4a" type="audio/mp4">
<source src="media/Helix.ogg" type="audio/ogg">
HTML5 audio not supported
</audio>
</div>
4.  Last, but by no means least, here's the JavaScript functionality to initialize the player; 
add the following code immediately below the last block of code, and before the 
closing </body> tag:
<script>
// using jQuery
$(document).ready(function() {
$('#audio-player').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause','volume','progress',  
'current', 'duration'],
audioVolume: 'horizontal',
audioWidth: 50,
audioHeight: 50
});
});
</script>
You won't see a great deal working—while the main functionality is in place, and ready to be 
used, not much will be shown until you add the CSS styling.
How to C#: Basic SDK Concept of XDoc.PDF for .NET
And PDF file text processing like text writing, extracting, searching, etc., are to load a PDF document from file or query data and save the PDF document.
how to make pdf editable form reader; flatten pdf form in reader
VB.NET PDF: Basic SDK Concept of XDoc.PDF
And PDF file text processing like text writing, extracting, searching, etc., are to load a PDF document from file or query data and save the PDF document.
pdf data extraction open source; extract pdf form data to xml
HTML5 Audio How-To
16
How it works...
We've used the same basic HTML code throughout this recipe to implement an audio  
player—MediaElementJS replaces the script calls with its code for the player that you  
see on screen. In this instance, we've gone a step further in comparison to the previous 
exercise by specifying a number of additional parameters within MediaElementJS. This will 
give us a little more control over the features that are displayed—which will begin to take 
shape once we add the requisite CSS styles, which will be the subject of our next task.
Styling our player (must know)
In this task, we take care of the code required to display and use our player—this is where  
you will see the features take shape and begin to be able to use the player.
Getting ready
There is nothing special required for this player, all you need is your text editor. We are  
going to produce something like the following screenshot as a player—this will work in  
most modern browsers:
How to do it...
1.  There's a lot of CSS code to go through this exercise, so let's begin by creating a 
stylesheet, which we will call style.css.
2.  Add the following to take care of the main image and basic frame:
.cover { padding: 10px; }
.audio-player { 
width: 430px; border: 1px solid #64B44C; margin: auto; 
margin-top: 30px; background: #4c4e5a;
VB.NET PDF insert text library: insert text into PDF content in vb
functions to PDF document imaging application, such as inserting text to PDF, deleting text from PDF, searching text in PDF, extracting text from PDF, and so on
collect data from pdf forms; export pdf form data to excel spreadsheet
HTML5 Audio How-To
17
background: -webkit-linear-gradient(top, #4c4e5a 0%, 
#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 
100%);
background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 
100%);
background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 
100%);
background: linear-gradient(top, #4c4e5a 0%, #2c2d33, 
100%);
-webkit-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px;
}
.audio-player h1 { margin: 0; padding: 0; border: none; 
outline: none; font-family: Helvetica, Arial, sans-serif; 
font-weight: bold; font-size: 14px; color: #ececec; 
text-shadow: 1px 1px 1px rgba(0,0,0, .5);
width: 250px; position: absolute; float: left; top: 50px;  
margin-left: 180px;
}
3.  It's now time to add the styles for the controls, take note: there is a lot of code  
required here:
.audio-player button { margin: 0; padding: 0; border: none;
outline: none; } 
.mejs-controls .mejs-play button, .mejs-controls .mejs-pause 
button {
background: url("../img/play-pause.png") repeat scroll 0 0 
transparent;
float: left;
height: 21px;
margin-left: 15px;
margin-top: -10px;
width: 21px;
}
.mejs-controls .mejs-pause button { background-position:0 
-21px; }
.mejs-controls .mejs-mute button, .mejs-controls .mejs-unmute 
button {
HTML5 Audio How-To
18
background: url("../img/mute-unmute.png") repeat scroll 0 
0 transparent; float: left; height: 12px; margin-left: 
145px; margin-top: -132px; position: absolute; width: 
14px; }
.mejs-controls .mejs-time-rail .mejs-time-handle, .mejs-controls 
.mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
background: url("../img/handle.png") no-repeat scroll 0 0 
transparent; display: block; height: 14px; position: 
absolute; width: 12px; }
.mejs-time-handle { top: -4px; }
.mejs-horizontal-volume-handle { top: -2px; }
.mejs-controls div.mejs-time-rail { width: 400px; }
.mejs-controls .mejs-time-rail span { left: 0; bottom: 0;
position: absolute; display: block; width: 400px;   
height: 5px; cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px; } 
.mejs-controls .mejs-time-rail .mejs-time-total { background: 
#999999; }
.mejs-controls .mejs-time-rail .mejs-time-loaded { width: 0;
background: #cccccc; }
.mejs-controls .mejs-time-rail .mejs-time-current { width: 0;
background: #64b44c; }
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute; display: none; width: 33px; height: 
23px; top: -26px; margin-left: -17px; background: 
url(../img/time-box.png); }
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px; display: block; left: 0; top: 4px; 
font-family: Helvetica, Arial, sans-serif; font-size:    
10px; font-weight: bold; color: #666666; text-align: 
center; }
HTML5 Audio How-To
19
.mejs-controls .mejs-horizontal-volume-slider {
cursor: pointer; float: left; margin-left: 205px;
margin-top: -130px; position: absolute; }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-
volume-total { width: 200px; height: 8px; 
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 
1px 0px rgba(255,255,255, .25);
-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 
1px 0px rgba(255,255,255, .25);
box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px 
rgba(255,255,255, .25);
-webkit-border-radius: 6px; -moz-border-radius: 6px;
border-radius: 6px; }
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-
volume-current { background: url("../img/volume-
bar.png") repeat-x scroll 0 0 transparent;
border-radius: 6px 6px 6px 6px; height: 6px; left: 1px;
position: absolute; top: 1px; width: 0; }
.mejs-time { float: left; margin-left: 70px; margin-top: -8px;
position: absolute; color: #ECECEC; font-family:    
Helvetica,Arial,sans-serif; font-size: 14px;
font-weight: bold; position: absolute;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }
.mejs-controls div.mejs-time-rail { float: left; margin-left: 
10px; margin-top: 30px; position: absolute; width: 400px; }
How it works...
Although it seems like a lot of code, all we have done here is to take each individual element 
of the player and add a style to it. We've used a fair number of CSS3 styles in this code; as the 
HTML5 <audio> tags are only really designed to work in the most modern browsers, it seems 
sensible to take advantage of the newer styles!
HTML5 Audio How-To
20
Using HTML5 audio players in a CMS system 
(must know)
Throughout this recipe, our focus has been on adding audio files to static web pages, but with 
increasing numbers of people using content management systems, it's important to take a 
look at how you could add audio to these systems. In this task, we're going to take a look at 
how to achieve this. We will use WordPress as an example, although the same principles will 
apply to other systems as well.
Getting ready
For this task, you will need access to a working installation of WordPress—I use a standalone 
version (currently Version 3.3.2, at time of writing), available from http://www.
wordpress.org. You will also need to avail yourself of a copy of the MediaElementJS—the 
plugin for use in WordPress that is available from http://wordpress.org/extend/
plugins/media-element-html5-video-and-audio-player/.
How to do it...
1.  Download a copy of the WordPress plugin, then upload the media-element-
html5-video-and-audio-player folder to the /wp-content/plugins/ 
directory of your WordPress installation.
2.  You need to log in to the administration section of WordPress, then click on the 
Plugins tab.
3.  You will see the plugin listed. Go ahead and click on Activate to make the plugin live:
4.  Now that the plugin is live, go ahead and create a new page in your WordPress 
installation. Enter the following within the editor:
[audio mp4="http://127.0.0./wordpress/audio/helix.ogg" 
ogg="http://127.0.0./wordpress/audio/helix.ogg"]
Documents you may be interested
Documents you may be interested