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

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>

<head>

<title>CH7EX3: Audio Properties And The Canvas</title>

window.addEventListener('load', eventWindowLoaded, false);

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(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = "#000000";

context.strokeRect(5, 5, theCanvas.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(gameLoop, 20);

drawScreen()

}

gameLoop();

}

</script>

</head>

<body>

Your browser does not support HTML5 Canvas.

</canvas>

</div>

</div>

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', eventWindowLoaded, false);

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 probably, maybe, 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>

<head>

<title>CH7EX4: Playing A Sound With No Tag</title>

window.addEventListener('load', eventWindowLoaded, false);

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(0, 0, theCanvas.width, theCanvas.height);

//Box

context.strokeStyle = '#000000';

context.strokeRect(5, 5, theCanvas.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(gameLoop, 20);

drawScreen()

}

gameLoop();

}

</script>

</head>

<body>

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

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