UNPKG

wavesurfer.js

Version:

Interactive navigable audio visualization using Web Audio and Canvas

535 lines (533 loc) 20.3 kB
<!doctype html> <html lang="en"> <head> <title>Code coverage report for src/mediaelement.js</title> <meta charset="utf-8"> <link rel="stylesheet" href="../prettify.css"> <link rel="stylesheet" href="../base.css"> <style type='text/css'> div.coverage-summary .sorter { background-image: url(../sort-arrow-sprite.png); } </style> </head> <body> <div class="header low"> <h1>Code coverage report for <span class="entity">src/mediaelement.js</span></h1> <h2> Statements: <span class="metric">4.41% <small>(3 / 68)</small></span> &nbsp;&nbsp;&nbsp;&nbsp; Branches: <span class="metric">0% <small>(0 / 29)</small></span> &nbsp;&nbsp;&nbsp;&nbsp; Functions: <span class="metric">0% <small>(0 / 23)</small></span> &nbsp;&nbsp;&nbsp;&nbsp; Lines: <span class="metric">4.41% <small>(3 / 68)</small></span> &nbsp;&nbsp;&nbsp;&nbsp; Ignored: <span class="metric"><span class="ignore-none">none</span></span> &nbsp;&nbsp;&nbsp;&nbsp; </h2> <div class="path"><a href="../index.html">All files</a> &#187; <a href="index.html">src/</a> &#187; mediaelement.js</div> </div> <div class="body"> <pre><table class="coverage"> <tr><td class="line-count">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164</td><td class="line-coverage"><span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">1</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">1</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-no">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-neutral">&nbsp;</span> <span class="cline-any cline-yes">1</span> <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">'use strict'; &nbsp; WaveSurfer.MediaElement = Object.create(WaveSurfer.WebAudio); &nbsp; WaveSurfer.util.extend(WaveSurfer.MediaElement, { init: <span class="fstat-no" title="function not covered" >function (params) {</span> <span class="cstat-no" title="statement not covered" > this.params = params;</span> &nbsp; // Dummy media to catch errors <span class="cstat-no" title="statement not covered" > this.media = {</span> currentTime: 0, duration: 0, paused: true, playbackRate: 1, play: <span class="fstat-no" title="function not covered" >function () {</span>}, pause: <span class="fstat-no" title="function not covered" >function () {</span>} }; &nbsp; <span class="cstat-no" title="statement not covered" > this.mediaType = params.mediaType.toLowerCase();</span> <span class="cstat-no" title="statement not covered" > this.elementPosition = params.elementPosition;</span> }, &nbsp; load: <span class="fstat-no" title="function not covered" >function (url, container, peaks) {</span> <span class="cstat-no" title="statement not covered" > var my = this;</span> &nbsp; <span class="cstat-no" title="statement not covered" > var media = document.createElement(this.mediaType);</span> <span class="cstat-no" title="statement not covered" > media.controls = this.params.mediaControls;</span> <span class="cstat-no" title="statement not covered" > media.autoplay = false;</span> <span class="cstat-no" title="statement not covered" > media.preload = 'auto';</span> <span class="cstat-no" title="statement not covered" > media.src = url;</span> <span class="cstat-no" title="statement not covered" > media.style.width = '100%';</span> &nbsp; <span class="cstat-no" title="statement not covered" > media.addEventListener('error', <span class="fstat-no" title="function not covered" >function () {</span></span> <span class="cstat-no" title="statement not covered" > my.fireEvent('error', 'Error loading media element');</span> }); &nbsp; <span class="cstat-no" title="statement not covered" > media.addEventListener('canplay', <span class="fstat-no" title="function not covered" >function () {</span></span> <span class="cstat-no" title="statement not covered" > my.fireEvent('canplay');</span> }); &nbsp; <span class="cstat-no" title="statement not covered" > media.addEventListener('ended', <span class="fstat-no" title="function not covered" >function () {</span></span> <span class="cstat-no" title="statement not covered" > my.fireEvent('finish');</span> }); &nbsp; <span class="cstat-no" title="statement not covered" > media.addEventListener('timeupdate', <span class="fstat-no" title="function not covered" >function () {</span></span> <span class="cstat-no" title="statement not covered" > my.fireEvent('audioprocess', my.getCurrentTime());</span> }); &nbsp; <span class="cstat-no" title="statement not covered" > var prevMedia = container.querySelector(this.mediaType);</span> <span class="cstat-no" title="statement not covered" > if (prevMedia) {</span> <span class="cstat-no" title="statement not covered" > container.removeChild(prevMedia);</span> } <span class="cstat-no" title="statement not covered" > container.appendChild(media);</span> &nbsp; <span class="cstat-no" title="statement not covered" > this.media = media;</span> <span class="cstat-no" title="statement not covered" > this.peaks = peaks;</span> <span class="cstat-no" title="statement not covered" > this.onPlayEnd = null;</span> <span class="cstat-no" title="statement not covered" > this.buffer = null;</span> <span class="cstat-no" title="statement not covered" > this.setPlaybackRate(this.playbackRate);</span> }, &nbsp; isPaused: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > return !this.media || this.media.paused;</span> }, &nbsp; getDuration: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > var duration = this.media.duration;</span> <span class="cstat-no" title="statement not covered" > if (duration &gt;= Infinity) { // streaming audio</span> <span class="cstat-no" title="statement not covered" > duration = this.media.seekable.end();</span> } <span class="cstat-no" title="statement not covered" > return duration;</span> }, &nbsp; getCurrentTime: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > return this.media &amp;&amp; this.media.currentTime;</span> }, &nbsp; getPlayedPercents: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > return (this.getCurrentTime() / this.getDuration()) || 0;</span> }, &nbsp; /** * Set the audio source playback rate. */ setPlaybackRate: <span class="fstat-no" title="function not covered" >function (value) {</span> <span class="cstat-no" title="statement not covered" > this.playbackRate = value || 1;</span> <span class="cstat-no" title="statement not covered" > this.media.playbackRate = this.playbackRate;</span> }, &nbsp; seekTo: <span class="fstat-no" title="function not covered" >function (start) {</span> <span class="cstat-no" title="statement not covered" > if (start != null) {</span> <span class="cstat-no" title="statement not covered" > this.media.currentTime = start;</span> } <span class="cstat-no" title="statement not covered" > this.clearPlayEnd();</span> }, &nbsp; /** * Plays the loaded audio region. * * @param {Number} start Start offset in seconds, * relative to the beginning of a clip. * @param {Number} end End offset in seconds, * relative to the beginning of a clip. */ play: <span class="fstat-no" title="function not covered" >function (start, end) {</span> <span class="cstat-no" title="statement not covered" > this.seekTo(start);</span> <span class="cstat-no" title="statement not covered" > this.media.play();</span> <span class="cstat-no" title="statement not covered" > end &amp;&amp; this.setPlayEnd(end);</span> <span class="cstat-no" title="statement not covered" > this.fireEvent('play');</span> }, &nbsp; /** * Pauses the loaded audio. */ pause: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > this.media &amp;&amp; this.media.pause();</span> <span class="cstat-no" title="statement not covered" > this.clearPlayEnd();</span> <span class="cstat-no" title="statement not covered" > this.fireEvent('pause');</span> }, &nbsp; setPlayEnd: <span class="fstat-no" title="function not covered" >function (end) {</span> <span class="cstat-no" title="statement not covered" > var my = this;</span> <span class="cstat-no" title="statement not covered" > this.onPlayEnd = <span class="fstat-no" title="function not covered" >function (time) {</span></span> <span class="cstat-no" title="statement not covered" > if (time &gt;= end) {</span> <span class="cstat-no" title="statement not covered" > my.pause();</span> <span class="cstat-no" title="statement not covered" > my.seekTo(end);</span> } }; <span class="cstat-no" title="statement not covered" > this.on('audioprocess', this.onPlayEnd);</span> }, &nbsp; clearPlayEnd: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > if (this.onPlayEnd) {</span> <span class="cstat-no" title="statement not covered" > this.un('audioprocess', this.onPlayEnd);</span> <span class="cstat-no" title="statement not covered" > this.onPlayEnd = null;</span> } }, &nbsp; getPeaks: <span class="fstat-no" title="function not covered" >function (length) {</span> <span class="cstat-no" title="statement not covered" > if (this.buffer) {</span> <span class="cstat-no" title="statement not covered" > return WaveSurfer.WebAudio.getPeaks.call(this, length);</span> } <span class="cstat-no" title="statement not covered" > return this.peaks || [];</span> }, &nbsp; getVolume: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > return this.media.volume;</span> }, &nbsp; setVolume: <span class="fstat-no" title="function not covered" >function (val) {</span> <span class="cstat-no" title="statement not covered" > this.media.volume = val;</span> }, &nbsp; destroy: <span class="fstat-no" title="function not covered" >function () {</span> <span class="cstat-no" title="statement not covered" > this.pause();</span> <span class="cstat-no" title="statement not covered" > this.unAll();</span> <span class="cstat-no" title="statement not covered" > this.media &amp;&amp; this.media.parentNode &amp;&amp; this.media.parentNode.removeChild(this.media);</span> <span class="cstat-no" title="statement not covered" > this.media = null;</span> } }); &nbsp; //For backwards compatibility WaveSurfer.AudioElement = WaveSurfer.MediaElement; &nbsp;</pre></td></tr> </table></pre> </div> <div class="footer"> <div class="meta">Generated by <a href="http://istanbul-js.org/" target="_blank">istanbul</a> at Tue Oct 27 2015 09:34:58 GMT+0100 (CET)</div> </div> <script src="../prettify.js"></script> <script> window.onload = function () { if (typeof prettyPrint === 'function') { prettyPrint(); } }; </script> <script src="../sorter.js"></script> </body> </html>