Skip to content

Commit

Permalink
plugins: add showTime option to cursor plugin (katspaugh#1511)
Browse files Browse the repository at this point in the history 
* added options to show the time on the cursor through parameters

- added options on CURSOR plugin: showTime boolean parameter will allow you to see the timestamp where the cursor is. custom style can be done using customShowTimeStyle parameter as an object that contain css parameters.

* update changelog
  • Loading branch information
@thijstriemstra
thijstriemstra committed Nov 17, 2018
1 parent 7b8ba75 commit 21fe30a
Show file tree
Hide file tree
Showing 5 changed files with 194 additions and 82 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ dist/**/*.map
/.grunt
/coverage
/_SpecRunner.html
/doc

.DS_Store
.idea
Expand Down
1 change: 1 addition & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ wavesurfer.js changelog
- Fix microphone plugin example for Safari (#1377)
- Minimap plugin: fix styling issues and add support for zooming (#1464)
- Timeline plugin: add duration parameter handling (#1491)
- Cursor plugin: add showTime option (#1143)
- Fix: progress bar did not reach 100% when audio file is small (#1502)

2.1.0 (29.09.2018)
Expand Down
173 changes: 95 additions & 78 deletions example/cursor/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,123 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>wavesurfer.js | Cursor Example</title>

<link href="data:image/gif;" rel="icon" type="image/x-icon" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>wavesurfer.js | Cursor Example</title>

<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="data:image/gif;" rel="icon" type="image/x-icon" />

<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" />
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- wavesurfer.js -->
<script src="../../dist/wavesurfer.js"></script>
<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" />

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

<!-- Demo -->
<script src="main.js"></script>
</head>
<script src="../../dist/plugin/wavesurfer.cursor.js"></script>

<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>
<!-- Demo -->
<script src="main.js"></script>
</head>

<h1 itemprop="name">Cursor Plugin Example</h1>
</div>
<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>

<div id="demo">
<div id="waveform">
<!-- Here be the waveform -->
</div>
<h1 itemprop="name">Cursor Plugin Example</h1>
</div>

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

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

<div class="row marketing">
<h3>Cursor plugin</h3>
<hr />
<p>Shows a cursor on the waveform.</p>

<p>
<pre><code>var wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
plugins: [
WaveSurfer.cursor.create()
]
});
<div class="row marketing">
<h3>Cursor plugin</h3>
<hr />
<p>Shows a cursor on the waveform.</p>

<p>
<pre><code>wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
plugins: [
WaveSurfer.cursor.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
'background-color': '#000',
color: '#fff',
padding: '2px',
'font-size': '10px'
}
})
]
});
</code></pre>
</p>
</div>
</p>
</div>

<div class="footer row">
<div class="col-sm-12">
<a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
</div>
<div class="footer row">
<div class="col-sm-12">
<a rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US"><img alt="Creative Commons License"
style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/80x15.png" /></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 xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName" rel="cc:attributionURL">katspaugh</a> is licensed under a&nbsp;<a style="white-space: nowrap" rel="license" href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported License</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 xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/katspaugh/wavesurfer.js" property="cc:attributionName"
rel="cc:attributionURL">katspaugh</a> is licensed under a&nbsp;<a style="white-space: nowrap" rel="license"
href="https://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons Attribution 3.0 Unported 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 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 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');

<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>

ga('create', 'UA-50026819-1', 'wavesurfer.fm');
ga('send', 'pageview');
</script>
</body>
</html>
13 changes: 12 additions & 1 deletion example/cursor/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,18 @@ var wavesurfer = {};
document.addEventListener('DOMContentLoaded', function() {
wavesurfer = WaveSurfer.create({
container: document.querySelector('#waveform'),
plugins: [WaveSurfer.cursor.create()]
plugins: [
WaveSurfer.cursor.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
'background-color': '#000',
color: '#fff',
padding: '2px',
'font-size': '10px'
}
})
]
});

// Load audio from URL
Expand Down
88 changes: 85 additions & 3 deletions src/plugin/cursor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,9 @@ export default class CursorPlugin {
opacity: '0.25',
style: 'solid',
zIndex: 4,
customStyle: {}
customStyle: {},
customShowTimeStyle: {},
showTime: false
};

/** @private */
Expand Down Expand Up @@ -104,6 +106,18 @@ export default class CursorPlugin {
* @type {?HTMLElement}
*/
this.cursor = null;
/**
* displays the time next to the cursor
*
* @type {Boolean}
*/
this.showTime = null;
/**
* The html container that will display the time
*
* @type {?HTMLElement}
*/
this.displayTime = null;
/** @private */
this.params = ws.util.extend({}, this.defaultParams, params);
}
Expand All @@ -124,7 +138,7 @@ export default class CursorPlugin {
top: 0,
bottom: 0,
width: '0',
display: 'block',
display: 'flex',
borderRightStyle: this.params.style,
borderRightWidth: this.params.width,
borderRightColor: this.params.color,
Expand All @@ -135,6 +149,41 @@ export default class CursorPlugin {
)
)
);
if (this.params.showTime) {
this.showTime = this.wrapper.appendChild(
this.style(
document.createElement('showTitle'),
this.wavesurfer.util.extend(
{
position: 'absolute',
zIndex: this.params.zIndex,
left: 0,
top: 0,
bottom: 0,
width: 'auto',
display: 'flex',
opacity: this.params.opacity,
pointerEvents: 'none',
height: '100%'
},
this.params.customStyle
)
)
);
this.displayTime = this.showTime.appendChild(
this.style(
document.createElement('div'),
this.wavesurfer.util.extend(
{
display: 'inline',
pointerEvents: 'none',
margin: 'auto'
},
this.params.customShowTimeStyle
)
)
);
}

this.wrapper.addEventListener('mousemove', this._onMousemove);
if (this.params.hideOnBlur) {
Expand All @@ -147,6 +196,9 @@ export default class CursorPlugin {
* Destroy the plugin (used by the Plugin API)
*/
destroy() {
if (this.params.showTime) {
this.cursor.parentNode.removeChild(this.showTime);
}
this.cursor.parentNode.removeChild(this.cursor);
this.wrapper.removeEventListener('mousemove', this._onMousemove);
if (this.params.hideOnBlur) {
Expand All @@ -164,15 +216,29 @@ export default class CursorPlugin {
this.style(this.cursor, {
left: `${pos}px`
});
if (this.params.showTime) {
const duration = this.wavesurfer.getDuration();
const timeValue = (pos / this.wavesurfer.drawer.width) * duration;
const formatValue = this.formatTime(timeValue);
this.style(this.showTime, {
left: `${pos}px`
});
this.displayTime.innerHTML = `${formatValue}`;
}
}

/**
* Show the cursor
*/
showCursor() {
this.style(this.cursor, {
display: 'block'
display: 'flex'
});
if (this.params.showTime) {
this.style(this.showTime, {
display: 'flex'
});
}
}

/**
Expand All @@ -182,5 +248,21 @@ export default class CursorPlugin {
this.style(this.cursor, {
display: 'none'
});
if (this.params.showTime) {
this.style(this.showTime, {
display: 'none'
});
}
}

/** timestamp time calculation */
formatTime(cursorTime) {
return [cursorTime].map(time =>
[
Math.floor((time % 3600) / 60), // minutes
('00' + Math.floor(time % 60)).slice(-2), // seconds
('000' + Math.floor((time % 1) * 1000)).slice(-3) // miliseconds
].join(':')
);
}
}

0 comments on commit 21fe30a

Please sign in to comment.