pdf to image c# open source : How to extract data from pdf file using java control application utility azure web page .net visual studio fulton_fulton41-part553

Figure 7-3. Showing audio properties on the canvas
There are also a few attributes displayed at the bottom of this list that we have not
discussed. They all come from calls to the canPlayType() function of HTMLAudioEle
ment. We are only displaying these right now, but in Example 7-3, we will make use of
this function to help us decide which sound to dynamically load in JavaScript.
Example 7-3. Audio properties and the canvas
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH7EX3: Audio Properties And The Canvas</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
function eventWindowLoaded() {
var audioElement = document.getElementById("theAudio");
audioElement.addEventListener("canplaythrough",audioLoaded,false);
audioElement.addEventListener("progress",updateLoadingStatus,false);
audioElement.load();
}
function canvasSupport () {
return Modernizr.canvas;
}
function updateLoadingStatus() {
var loadingStatus = document.getElementById("loadingStatus");
var audioElement = document.getElementById("theAudio");
var percentLoaded = parseInt(((audioElement.buffered.end(0) /
audioElement.duration* 100));
document.getElementById("loadingStatus").innerHTML =   'loaded '
+ percentLoaded + '%';
Audio Tag Properties, Functions, and Events  |  389
How to extract data from pdf file using java - 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 into excel; extract data from pdf table
How to extract data from pdf file using java - 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
collect data from pdf forms; extracting data from pdf files
}
function audioLoaded() {
canvasApp();
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
function  drawScreen () {
//Background
context.fillStyle = "#ffffaa";
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = "#000000";
context.strokeRect(5 5theCanvas.width-10, theCanvas.height-10);
// Text
context.fillStyle  = "#000000";
context.fillText  ("Duration:" + audioElement.duration,  20 ,20);
context.fillText  ("Current time:" + audioElement.currentTime,  20 ,40);
context.fillText  ("Loop: " + audioElement.loop 20 ,60);
context.fillText  ("Autoplay: " +audioElement.autoplay 20 ,80);
context.fillText  ("Muted: " + audioElement.muted,  20 ,100);
context.fillText  ("Controls: " + audioElement.controls,  20 ,120);
context.fillText  ("Volume: " + audioElement.volume 20 ,140);
context.fillText  ("Paused: " + audioElement.paused 20 ,160);
context.fillText  ("Ended: " + audioElement.ended,  20 ,180);
context.fillText  ("Source: " + audioElement.currentSrc,  20 ,200);
context.fillText  ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"),
20 ,220);
context.fillText  ("Can Play WAV: " + audioElement.canPlayType("audio/wav"),
20 ,240);
context.fillText  ("Can Play MP3: " + audioElement.canPlayType("audio/mp3"),
20 ,260);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
var audioElement = document.getElementById("theAudio");
audioElement.play();
390  |  Chapter 7: Working with Audio
Generate and draw Data Matrix for Java
correction is valid for all 2D barcodes like QR Code, Data Matrix and PDF 417 in Download the Java Data Matrix Generation Package and extract the file.
extract pdf form data to xml; extract data from pdf file
Generate and draw PDF 417 for Java
Error correction is valid for all 2D barcodes like QR Code, Data Matrix and PDF 417 in Download the Java PDF 417 Generation Package and extract the file
extract pdf form data to excel; extract table data from pdf
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<div id="loadingStatus">
0%
</div>
<div style="position: absolute; top: 50px; left: 600px; ">
<audio id="theAudio" controls >
<source src="song1.mp3" type="audio/mp3">
<source src="song1.ogg" type="audio/ogg">
<source src="song1.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
When tested, Internet Explorer 10 does not fire the Audio progress
event.
Playing a Sound with No Audio Tag
Now that we have a sound playing in an HTML5 page and we are tracking the properties
of the audio element on the canvas, it is time to step up their integration. The next step
is to do away with the <audio> tag embedded in the HTML page.
If you recall from Chapter 6, we created a video element dynamically in the HTML page
and then used the canPlayType() method of the HTMLVideoElement object to figure
Playing a Sound with No Audio Tag  |  391
C# PowerPoint: Read, Decode & Scan Barcode Image from PowerPoint
C# PowerPoint: Data Matrix Barcode Reader, C# PowerPoint C# PowerPoint: Decode PDF-417 Barcode Image, C# PowerPoint linear barcode image from PowerPoint file in
how to flatten a pdf form in reader; extracting data from pdf forms
Data Matrix .NET Windows Forms Bar Code Control
using Rasteredge.WinForms.Barcode; // construct a linear barcode Print Data Matrix Barcodes with .NET WinForms Barcode barcode and save into image file in gif
how to make pdf editable form reader; pdf data extraction open source
out what video file type to load for a particular browser. We will do something very
similar for audio.
Dynamically Creating an Audio Element in JavaScript
The first step to dynamically creating audio elements is to create a global variable named
audioElement. This variable will hold an instance of HTMLAudioElement that we will
use in our canvas application. Recall that audio elements in an HTML page are instances
of the HTMLAudioElement DOM object. We refer to them as audio objects when em‐
bedded in an HTML page and as instances of HTMLAudioElement when created dy‐
namically in JavaScript. However, they are essentially the same.
Don’t fret if you don’t like using global variables. By the end of this
chapter, we will show you a way to make these variables local to your
canvas application.
Next, we create our event handler for the window load event named eventWindowLoa
ded(). Inside that function, we call the createElement() function of the DOM docu
ment object, passing the value audio as the type of element to create. This will dynam‐
ically create an audio object and put it into the DOM. By placing that object in the
audioElement variable, we can then dynamically place it onto the HTML page with a
call to the appendChild() method of the document.body DOM object:
window.addEventListener('load'eventWindowLoadedfalse);
var audioElement;
function eventWindowLoaded() {
audioElement = document.createElement("audio");
document.body.appendChild(audioElement);
However, just having a dynamically created audio element is not enough. We also need
to set the src attribute of the HTMLAudioElement object represented by audioElement
to a valid audio file to load and play. But the problem is that we don’t yet know what
type of audio file the current browser supports. We will get that information from a
function we will create named supportedAudioFormat(). We will define this function
so that it returns a string value representing the extension of the file type we want to
load. When we have that extension, we concatenate it with the name of the sound we
want to load, and we set the src with a call to the setAttribute() method of the
HTMLAudioElement object:
var audioType = supportedAudioFormat(audioElement);
If a valid extension from supportedAudioFormat() is not returned, something has gone
wrong and we need to halt execution. To handle this condition in a simple way, we create
an alert() message and then return from the function, effectively halting execution.
392  |  Chapter 7: Working with Audio
.NET Windows Forms GS1-128 Bar Code Control & SDK
a global standard for exchanging data between different using Rasteredge.WinForms. Barcode; // construct a linear barcode object and save into image file in gif
exporting data from pdf to excel; html form output to pdf
Java Imaging SDK Library: Document Image Scan, Process, PDF
convert and compress a multitude of file formats, such as Gif, Png, Tiff, Jpeg2000, DICOM, JBIG2, PDF, MS Word & 2D barcodes, including QR Code, Data Matrix Code
how to save fillable pdf form in reader; how to fill pdf form in reader
While this is not a very robust form of error handling, it will work for the sake of this
example:
if (audioType == "") {
alert("no audio support");
return;
}
audioElement.setAttribute("src""song1." + audioType);
Finally, like we did with video, we will listen for the canplaythrough event of audio
Element so that we know when the sound is ready to play:
audioElement.addEventListener("canplaythrough",audioLoaded,false);
Finding the Supported Audio Format
Before the code in the previous section will work, we need to define the supportedAu
dioFormat() function. Because we are adding audio objects dynamically to the HTML
page, we do not have a way to define multiple <source> tags like we can in HTML.
Instead, we are going to use the canPlayType() method of the audio object to tell us
which type of audio file to load. We already introduced you to the canPlayType()
method in Chapter 6, but to refresh your memory, canPlayType() takes a single pa‐
rameter—a MIME type. It returns a text string of maybe, probably, or "" (nothing). We
are going to use these values to figure out which media type to load and play. Just like
in Chapter 6, and for the sake of this exercise, we are going to assume that both maybe
and probably equate to yes. If we encounter either result with any of our three MIME
types (audio/ogg, audio/wav, audio/mp3), we will return the extension associated with
that MIME type so that the sound file can be loaded.
The next function is essentially the same as the one we created in Chap‐
ter 6 to handle video formats. The obvious changes here are with the
MIME types for audio.
In the following function, audio represents the instance of HTMLAudioElement that we
will test. The returnExtension variable represents that valid extension for the first
MIME type found that has the value of maybe or probably returned:
function supportedAudioFormat(audio) {
var returnExtension = "";
if (audio.canPlayType("audio/ogg"=="probably" ||
audio.canPlayType("audio/ogg"== "maybe") {
returnExtension = "ogg";   } 
else if(audio.canPlayType("audio/wav") =="probably" ||
audio.canPlayType("audio/wav"== "maybe") {
returnExtension = "wav";
else if(audio.canPlayType("audio/mp3") == "probably" ||
audio.canPlayType("audio/mp3"== "maybe") {
Playing a Sound with No Audio Tag  |  393
Data Matrix C#.NET Integration Tutorial
to print Data Matrix using C# BarCode datamatrix.generateBarcodeToByteArray(); //Generate Data Matrix barcodes & Document Imaging SDK and Java Document Imaging
using pdf forms to collect data; exporting pdf form to excel
Create Data Matrix with VB.NET, Data Matrix Bar Code Generating
Rasteredge.Barcode.DataMatrix class to generate Data Matrix barcodes by using VB.NET professional .NET Document Imaging SDK and Java Document Imaging
sign pdf form reader; export excel to pdf form
returnExtension = "mp3";
}
return returnExtension;
}
Notice that we do not check for a condition when no valid audio format is found and
the return value is "". If that is the case, the code that has called this function might
need to be written in a way to catch that condition and alter the program execution. We
did that with the test of the return value and the alert() message, which we described
in the previous section.
If you want to test the error condition with no valid return value from
this function, simply add an extra character to the MIME type (for ex‐
ample, audio/oggx) to make sure an empty string is always returned.
Alternatively, you can use Modernizr to test for audio support. If you have included the
Modernizr JavaScript library in your HTML page (as we have done in every application
we have written thus far), you can access the static  values  of Modernizr.audio.ogg,
Modernizr.audio.wav, and Modernizr.audio.mp3 to test to see whether those types are
valid. These are not Booleans—they evaluate to the same probablymaybe, and "" values
that we get from a call to canPlayType(). If you are comfortable using Modernizr for
all your tests, you can replace the test in the code with tests of these Modernizr static
values.
Playing the Sound
Finally, we get to the point where we can play a sound inside our canvasApp() function.
Because we preloaded the sound originally outside the context of this function into a
variable with a global scope, we just need to call the play() function audioElement to
start playing the sound:
audioElement.play();
Figure  7-4 shows what this Canvas application will look like when executed in an
HTML5-compliant web browser. (Notice that we have left the display of the audio
properties in this application.)
394  |  Chapter 7: Working with Audio
Data Matrix Web Server Control for ASP.NET
Server Control in IIS (without using Visual Studio Port/datamatrix/datamatrix.aspx? DATA=YourDatainDataMatrix NET Document Imaging SDK and Java Document Imaging
flatten pdf form in reader; pdf data extractor
.NET JBIG 2 SDK | Encode & Decode JBIG 2 Images
Highly-efficient data/image compression, 2-5 times than CCITT G3, CCITT G4; Simple to reduce PDF file size using JBIG2 compression within PDF;
extract data from pdf; pdf form data extraction
Figure 7-4. Sound loaded and played “on” the canvas
Look Ma, No Tag!
Now check out the full application in Example 7-4. Notice that there is no <audio> tag
defined in the HTML, but the sound still plays. This is our first step toward integrating
HTMLAudioElement objects with HTML5 Canvas.
Example 7-4. Playing a sound with no tag
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH7EX4: Playing A Sound With No Tag</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load'eventWindowLoadedfalse);
var audioElement;
function eventWindowLoaded() {
audioElement = document.createElement("audio");
document.body.appendChild(audioElement);
var audioType = supportedAudioFormat(audioElement);
if (audioType == "") {
alert("no audio support");
return;
}
audioElement.addEventListener("canplaythrough",audioLoaded,false);
audioElement.setAttribute("src""song1." + audioType);
}
Playing a Sound with No Audio Tag  |  395
function supportedAudioFormat(audio) {
var returnExtension = "";
if (audio.canPlayType("audio/ogg") =="probably" ||
audio.canPlayType("audio/ogg"== "maybe") {
returnExtension = "ogg";
else if(audio.canPlayType("audio/wav") =="probably" ||
audio.canPlayType("audio/wav"== "maybe") {
returnExtension = "wav";
else if(audio.canPlayType("audio/mp3") == "probably" ||
audio.canPlayType("audio/mp3"== "maybe") {
returnExtension = "mp3";
}
return returnExtension;
}
function canvasSupport () {
return Modernizr.canvas;
}
function audioLoaded(event) {
canvasApp();
}
function canvasApp() {
if (!canvasSupport()) {
return;
}
function  drawScreen () {
//Background
context.fillStyle = '#ffffaa';
context.fillRect(00theCanvas.width, theCanvas.height);
//Box
context.strokeStyle = '#000000';
context.strokeRect(5 5theCanvas.width-10, theCanvas.height-10);
// Text
context.fillStyle = "#000000";
context.fillText  ("Duration:" + audioElement.duration,  20 ,20);
context.fillText  ("Current time:" + audioElement.currentTime,  20 ,40);
context.fillText  ("Loop: " + audioElement.loop 20 ,60);
context.fillText  ("Autoplay: " +audioElement.autoplay 20 ,80);
context.fillText  ("Muted: " + audioElement.muted,  20 ,100);
396  |  Chapter 7: Working with Audio
context.fillText  ("Controls: " + audioElement.controls,  20 ,120);
context.fillText  ("Volume: " + audioElement.volume 20 ,140);
context.fillText  ("Paused: " + audioElement.paused 20 ,160);
context.fillText  ("Ended: " + audioElement.ended,  20 ,180);
context.fillText  ("Source: " + audioElement.currentSrc,  20 ,200);
context.fillText  ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"),
20 ,220);
context.fillText  ("Can Play WAV: " + audioElement.canPlayType("audio/wav"),
20 ,240);
context.fillText  ("Can Play MP3: " + audioElement.canPlayType("audio/mp3"),
20 ,260);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
audioElement.play()
function gameLoop() {
window.setTimeout(gameLoop20);
drawScreen()
}
gameLoop();
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Creating a Canvas Audio Player
Now that we can play an audio file directly in an HTML page using the <audio> tag or
through JavaScript by creating a dynamic HTMLAudioElement object, it’s time to step up
our game. We are going to create an audio player on the canvas that we can use to control
dynamically loaded audio files. Why do we want to do this? Well, while the audio con‐
trols baked into HTML5-compliant browsers might look decent, it is often necessary
for developers to implement a design that more closely matches a particular website.
HTML5 Canvas provides a way to create a dynamic set of audio controls with nearly
any look-and-feel you desire.
Creating a Canvas Audio Player  |  397
However, this flexibility comes at a cost. HTML5 Canvas does not natively support
common GUI controls such as push buttons, toggle buttons, and sliders. So to create a
decent audio player, we need to make these types of GUI user controls from scratch. We
could create these controls in HTML and JavaScript, but we have already covered com‐
munication between HTML and Canvas via form controls several times in this book.
You wanted to know how to make HTML5 Canvas apps when you started reading, so
we won’t pull any punches in this chapter.
Creating Custom User Controls on the Canvas
For this application we are going to create four elements:
Play/pause push button
The audio file is either playing or is paused. Whichever state it is currently in, we
show the other button (for example, show pause when playing).
A sliding progress bar
This is a non-interactive slider. It displays how much of the audio track has played
and how much is left to play. The movement of this bar needs to be dynamic and 
based on the duration and currentTime properties of the HTMLAudioElement ob‐
ject.
An interactive volume slider
We want to create a sliding volume control that the user can manipulate with a
click-and-drag operation. This is the trickiest control we will build because Canvas
has no native support for click-and-drag.
A loop toggle button
This is a bonus. Most of the default embedded HTML5 audio players do not have
a loop/no-loop toggle button, but we are going to add one. Already, we are out‐
stripping the functionality of standard HTML5!
Figure 7-5 shows the audiocontrols.png image that we created. It holds all the images
we will use for the audio player. The top row consists of:
• The play state of the play/pause button
• The background of the play slider
• The moving slider we will use for the play and volume sliders
The second row consists of:
• The pause state of the play/pause button
• The background of the volume slider
• The “off” state of the loop button
398  |  Chapter 7: Working with Audio
Documents you may be interested
Documents you may be interested