Ask your technical questions on forums or here :
ASP.NET or MVC | C# | Windows Phone
Microsoft Technology Journals by Abhimanyu K Vatsa
HOME ABOUT RAZOR BOOK SPEAKING MVC ASP.NET JQUERY VIDEOS EBOOK ARCHIVE
Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

3 May 2015

Remove Header & Footer from Print Preview in Google Chrome

Recently I had a requirement when one printing the web page should not display header and footer, basically they are automatically inserted by the browsers. Here is what this looks like:

15 Apr 2015

Flip or Rotate Image using CSS

In this quick code you will learn how to flip or rotate image with transition effect using CSS. We will have opportunity to trigger the flip or rotate action on mouse hover or click, for this we will be using jQuery.

14 Apr 2015

Create Expandable or Toggle Drop Down using jQuery

In this quick code you will learn how to create expandable or toggle drop down menu with little icon which shows menu is opened or not. Let's straight look at working example below.

2 Apr 2015

Disable Browser Back Button

In this quick code you will learn how to disable browser back button. As this is a client side solution, I would never suggest to use when it comes to confidential websites like banking sector.

31 Mar 2015

Query string values in JavaScript

In this quick code you will learn how to get query string (browser address bar's variable) values using JavaScript.

Substring in jQuery or using substring(from, to) or substr(start, length) functions

In this quick code you will learn how to get substring from a string in jQuery. A substring is a string which part of another string, we need such functions when some part of string needs to be remove or escape out. We can use either substring(from, to) or substr(start, length).

Cookies in jQuery with jQuery.Cookie library

In this quick code you will learn how to read, write and delete session cookies using jQuery. Remember to use jquery.cookie library on the page.

30 Mar 2015

Contact Number or Mobile validation in jQuery

In this quick code you will learn how to validate Contact Number or Mobile client side using jQuery. We will be validating only number here because for different countries and providers length may vary. Find the running code below.

Email Validation in jQuery

In this quick code you will learn how to validate Email IDs client side using jQuery. Find the running code below.

26 Mar 2015

Change Button Text using jQuery

I have started sharing "Quick Code Snippet" and this is very first post of the series starting today 27 March 2015.

16 Jan 2015

Hidden Input HTML control with jQuery, ASP.NET and C#

In this post you will learn use of Hidden Input HTML control <input type="hidden"....> with jQuery, also using this from ASP.NET and C#.

15 Jan 2015

Fluid Header/Footer problem when windows resized or opened on mobile (desktop view)

This is a very common issue I have seen on various websites, generally in websites which is not responsive. Look at this image to understand this issue quickly.

14 Mar 2014

Single File Upload to Multiple File Upload in MVC

In this blog post you will learn how to take advantage of HTML5 in MVC to turn single file upload into multiple file upload functionality. Today almost every browser extended the support to HTML5 and in case any browser does not, it will still work as it was working before and upload single file at a time.

22 Jan 2014

Single File Upload to Multiple File Upload ASP.NET Web Forms

With ASP.NET File upload control we can only upload one file at a time while HTML5 has a good notion to upload multiple files at a time. Look at the animated image given below, which was the actual framework before HTML5 equivalent updates with ASP.NET 4.5 Framework.

31 May 2012

Using JavaScript to Control the Playback of Audio Tag in HTML5


In this post you will learn how to control the audio playback of <audio> tag in HTML5 by using JavaScript logics.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page using the <audio> element.

To play an audio file in HTML5, this is all you need:

        <audio controls="controls">
            <source src="http://domain.com/inanhq.mp3" type="audio/mp3" />
            <source src=" http://domain.com/inanhq.mp3" type="audio/mpeg" />
          Your browser does not support the audio tag.
        </audio>

Above <audio> element adds audio controls like play, pause and volume automatically on the web page. Here is the output.


We can use text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.

Now to customize the audio controls like play, pause and volume and even add new rewind, forward, restart buttons we just need to add some JavaScript logics.

Look at the HTML Markup and its output in browser.

HTML Markup:

    <h1>JavaScript Controlled Audio Playback</h1>
    <div>
        <p>
            Type sample audio url having .mp3 exetension and click on play button.
            <br />
            <input type="text" id="audiofile" size="80" value="" />
        </p>
        <audio id="myaudio">
          Audio Tag not Supported.
        </audio>
        <button id="play" onclick="playAudio();">
          Play
        </button>
   
        <button onclick="rewindAudio();">
          Rewind
        </button>
        <button onclick="forwardAudio();">
          Fast forward
        </button>
        <button onclick="restartAudio();">
          Restart
        </button>
    </div>

Output in Browser:





Now to apply the action in above HTML Markup we need to write JavaScript logics. Find the JavaScript Methods below:

    <script type="text/javascript">
        // Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;
                    }

                    // Tests the paused attribute and set state.
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }
        // Rewinds the audio file by 30 seconds.

        function rewindAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }

        // Fast forwards the audio file by 30 seconds.

        function forwardAudio() {

            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }

        // Restart the audio file to the beginning.

        function restartAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }
        }
    </script>

If you know the JavaScript, then you will not find any difficulties to understand above methods.

Now, let’s see the <audio> tag in action.




Note: Download the attached project to test and you need internet connection because I am using remote server to get audio file.


I hope you like it. Thanks.

Credit: http://msdn.microsoft.com/en-us/library/ie/gg589529(v=vs.85).aspx