bachir
/
edlp_d8


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>wavesurfer.js | Media Element Example</title>

        <link href="data:image/gif;" rel="icon" type="image/x-icon" />

        <!-- Bootstrap -->
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link rel="stylesheet" href="../css/style.css" />
        <link rel="stylesheet" href="../css/ribbon.css" />
        <link rel="screenshot" itemprop="screenshot" href="https://katspaugh.github.io/wavesurfer.js/example/screenshot.png" />

        <!-- wavesurfer.js -->
        <script src="../../dist/wavesurfer.js"></script>

        <script src="../../dist/plugin/wavesurfer.regions.js"></script>

        <!-- Demo -->
        <script src="main.js"></script>
    </head>

    <body itemscope itemtype="http://schema.org/WebApplication">
        <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                </ul>

                <h1 itemprop="name">Existing Media Element Example</h1>
            </div>

            <div id="demo">
                <div id="waveform">
                    <!-- Here be the waveform -->
                </div>

                <div class="controls">
                    <button class="btn btn-primary" data-action="play">
                        <i class="glyphicon glyphicon-play"></i>
                        Play
                        /
                        <i class="glyphicon glyphicon-pause"></i>
                        Pause
                    </button>
                </div>

                <video src="../media/demo_video.mp4" type="video/mpeg"></video>
            </div>

            <div class="row marketing">
                <h3>How to Enable the Fallback</h3>

                <hr />

                <p>
                    You can choose to use an existing
                    html5 audio or video element manually. Simply set the <code>backend</code>
                    option to <code>"MediaElement"</code> and pass the media element as the first
                    argument to wavesurfer.load(). Include an array of peaks as the second
                    argument, the Web Audio API will not be used to render the peaks.
                </p>

                <p>
                <pre><code>var wavesurfer = WaveSurfer.create({
  container: document.querySelector('#waveform'),
  waveColor: '#A8DBA8',
  progressColor: '#3B8686',
  backend: 'MediaElement'
});

// Load audio from existing media element
var mediaElt = document.querySelector('video');

wavesurfer.load(mediaElt);</code></pre>
                </p>

                <h3>Pre-rendered Peaks</h3>

                <p>
                    If you have pre-rendered peaks (on your server),
                    you can pass them into the <code>load</code>
                    function. This is optional–if you don't provide
                    any peaks,
                    <strong>waserver.js</strong> will first draw a
                    thin line instead of a waveform, then attempt to
                    download the audio file via Ajax and decode it
                    with Web Audio if available.
                </p>

                <p>
                <pre><code>
// init with an array of peak data.
wavesurfer.load(mediaElt, [0.0218, 0.0183, 0.0165, 0.0198, 0.2137]);
                </code></pre>
                </p>


                <p>
                    Press this button to see the same demo with pre-decoded peaks:
                    <button class="btn btn-warning" data-action="peaks">
                        Load with pre-rendered peaks
                    </button>
                </p>

            </div>

            <div class="footer row">
                <div class="col-sm-12">
                    <a rel="license" href="https://opensource.org/licenses/BSD-3-Clause"><img alt="BSD-3-Clause License" style="border-width:0" src="https://img.shields.io/badge/License-BSD%203--Clause-blue.svg" /></a>
                </div>

                <div class="col-sm-7">
                    <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">wavesurfer.js</span> by <a href="https://github.com/katspaugh/wavesurfer.js">katspaugh</a> is licensed under a&nbsp;<a style="white-space: nowrap" rel="license" href="https://opensource.org/licenses/BSD-3-Clause">BSD-3-Clause License</a>.
                </div>

                <div class="col-sm-5">
                    <div class="pull-right">
                        <noindex>
                            The audio file is from <a rel="nofollow" href="http://spokencorpora.ru/">spokencorpora.ru</a>, used with permission.
                        </noindex>
                    </div>
                </div>
            </div>
        </div>

        <div class="github-fork-ribbon-wrapper right">
            <div class="github-fork-ribbon">
                <a itemprop="isBasedOnUrl" href="https://github.com/katspaugh/wavesurfer.js">Fork me on GitHub</a>
            </div>
        </div>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-50026819-1', 'wavesurfer.fm');
            ga('send', 'pageview');
        </script>
    </body>
</html>