-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspecto.html
47 lines (47 loc) · 15.4 KB
/
specto.html
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
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Specto: A Three Day Challenge By Swift UI Jam - Taha Mousavi</title><meta name="description" content="Specto is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged…"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="canonical" href="https://tahamousavi.github.io/specto.html"><link rel="alternate" type="application/atom+xml" href="https://tahamousavi.github.io/feed.xml"><link rel="alternate" type="application/json" href="https://tahamousavi.github.io/feed.json"><meta property="og:title" content="Specto: A Three Day Challenge By Swift UI Jam"><meta property="og:image" content="https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg"><meta property="og:image:width" content="1500"><meta property="og:image:height" content="500"><meta property="og:site_name" content="Taha Mousavi"><meta property="og:description" content="Specto is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged…"><meta property="og:url" content="https://tahamousavi.github.io/specto.html"><meta property="og:type" content="article"><link rel="stylesheet" href="https://tahamousavi.github.io/assets/css/style.css?v=b1a5fc78c4cf9c158c60d1dc7c392797"><link rel="stylesheet" href="https://tahamousavi.github.io/assets/css/photoswipe.css?v=ffb247881cd6f611d007fd4a96b7b16a"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://tahamousavi.github.io/specto.html"},"headline":"Specto: A Three Day Challenge By Swift UI Jam","datePublished":"2021-10-02T18:22","dateModified":"2022-12-23T23:24","image":{"@type":"ImageObject","url":"https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg","height":500,"width":1500},"description":"Specto is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged…","author":{"@type":"Person","name":"Taha Mousavi","url":"https://tahamousavi.github.io/authors/taha-mousavi/"},"publisher":{"@type":"Organization","name":"Taha Mousavi"}}</script><style>.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url(https://tahamousavi.github.io/assets/svg/gallery-icons-light.svg);
}</style></head><body><header class="header" id="js-header"><a href="https://tahamousavi.github.io/" class="logo">Taha Mousavi</a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://tahamousavi.github.io/tags/design-tag/" target="_self">Product Design</a></li><li><a href="https://tahamousavi.github.io/tags/illustration-tag/" target="_self">Visuals</a></li><li><a href="https://tahamousavi.github.io/about-me.html" target="_self">About me / CV</a></li></ul></nav></header><main><div class="wrapper"><article class="post"><header class="post__header"><a href="https://tahamousavi.github.io/tags/design-tag/" class="post__maintag">Product Design</a><h1 class="post__title">Specto: A Three Day Challenge By Swift UI Jam</h1></header><figure class="post__featured-image"><img src="https://tahamousavi.github.io/media/posts/18/specto-banner.jpeg" height="500" width="1500" alt=""></figure><div class="post__inner"><div class="post__entry"><p><strong>Specto</strong> is an audio visualizer application that also transcribes user input using Apple speech recognition API. Each recording session is tagged with highlighted keywords by the TextRank algorithm. Designed and developed by Taha Mousavi, Abbas Mousavi and Moeen Zamani for <a href="https://swiftuijam.com/" target="_blank" rel="noopener noreferrer">SwiftUI Jam</a>, Feb 2021.</p><p><a href="https://github.com/moeenz/Specto" target="_blank" rel="noopener noreferrer">[Source Code on Github]</a></p><p dir="auto">In 3 days, I worked on Finding creative ways to visualize recorded voice and naming the recorded voice files.</p><h3 dir="auto">Visualization</h3><p dir="auto">For visualization, I suggested using the FFT method for detecting frequencies and using that for creating a pattern on a vinyl disc. After several tests and improvements, Abbas and Moeen found an optimum and beautiful method to implement it.</p><figure class="post__image post__image--center"><img src="https://tahamousavi.github.io/media/posts/18/wireframe-2.jpeg" alt="" width="4032" height="3024"></figure><p dir="auto"> </p><div class="gallery-wrapper"><div class="gallery" data-is-empty="false" data-columns="3"><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/IMG_5311.jpg" data-size="1125x2436"><img src="https://tahamousavi.github.io/media/posts/18/gallery/IMG_5311-thumbnail.jpg" alt="" width="720" height="1559"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/IMG_0336.jpg" data-size="1091x1911"><img src="https://tahamousavi.github.io/media/posts/18/gallery/IMG_0336-thumbnail.jpg" alt="" width="720" height="1261"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Image-2-11-21-at-11.18-PM.jpg" data-size="544x931"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Image-2-11-21-at-11.18-PM-thumbnail.jpg" alt="" width="544" height="931"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-17-at-01.00.35.jpg" data-size="1284x2778"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-17-at-01.00.35-thumbnail.jpg" alt="" width="720" height="1558"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-18-at-00.46.12.jpg" data-size="1284x2778"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Simulator-Screen-Shot-iPhone-12-Pro-Max-2021-02-18-at-00.46.12-thumbnail.jpg" alt="" width="720" height="1558"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/gallery-concept.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/gallery-concept-thumbnail.png" alt="" width="720" height="1281"></a></figure></div></div><figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675567001?title=0&byline=0&portrait=0&color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure><figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566930?title=0&byline=0&portrait=0&color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure><p dir="auto">We uses angular gradients to project the FFT to concentric circle paths. The whole image shows 50 FFTs calculated five times per second each with 33 components which makes 1650 visual components in total. We started with multiple curves in different colors but that implementation was slow, so we switched to angular gradients producing smoother graphics with much better performance.</p><p dir="auto">Here are the final results for different voice recorded. </p><figure class="post__image post__image--wide"><img src="https://tahamousavi.github.io/media/posts/18/pattern-on-vinyl-disc.webp" alt="" width="1600" height="1070"></figure><p dir="auto"> </p><h3 dir="auto">Prototypes</h3><p dir="auto">Interactive prototypes by <strong>Principle</strong>.</p><figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566982?title=0&byline=0&portrait=0&color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure><figure class="post__video"><iframe width="425" height="350" src="https://player.vimeo.com/video/675566958?title=0&byline=0&portrait=0&color=8dc7dc" allowfullscreen="allowfullscreen" data-mce-fragment="1"></iframe></figure><h3 dir="auto">Naming of files</h3><p dir="auto">For naming the recorded file, We use highlighted keywords by the TextRank algorithm. By using different fonts and colors, Specto assigns three words to every file and creates an album cover for them.</p><div class="gallery-wrapper"><div class="gallery" data-is-empty="false" data-columns="2"><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Hand-picked-cover-from-Unsplash.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Hand-picked-cover-from-Unsplash-thumbnail.png" alt="" width="720" height="1281"></a></figure><figure class="gallery__item"><a href="https://tahamousavi.github.io/media/posts/18/gallery/Smooth-graidient-on-cover.png" data-size="750x1334"><img src="https://tahamousavi.github.io/media/posts/18/gallery/Smooth-graidient-on-cover-thumbnail.png" alt="" width="720" height="1281"></a></figure></div></div><h3 dir="auto"> </h3><h3 dir="auto">App Icon</h3><p>App icon inspired by 45 rpm adapters.</p><figure class="post__image post__image--center"><img src="https://tahamousavi.github.io/media/posts/18/IMG_5783.jpg" alt="" width="4032" height="3024"></figure><figure class="post__image post__image--center"><img src="https://tahamousavi.github.io/media/posts/18/specto-app-icon-2.webp" alt="" width="1600" height="1200"></figure><p> </p><p> </p></div></div></article></div></main><footer class="footer"><div class="footer__copyright">© 2024 Taha Mousavi</div></footer><script>window.publiiThemeMenuConfig = {
mobileMenuMode: 'sidebar',
animationSpeed: 300,
submenuWidth: 'auto',
doubleClickTime: 500,
mobileMenuExpandableSubmenus: true,
relatedContainerForOverlayMenuSelector: '.navbar',
};</script><script defer="defer" src="https://tahamousavi.github.io/assets/js/scripts.min.js?v=66112a161d5939d966ce2b20c13988d9"></script><script defer="defer" src="https://tahamousavi.github.io/assets/js/photoswipe.min.js?v=017385b552f7e0d979e2e2fe6f324015"></script><script defer="defer" src="https://tahamousavi.github.io/assets/js/photoswipe-ui-default.min.js?v=d067f0883540b1ddda0e2c9ad1b14260"></script><script>var initPhotoSwipeFromDOM=function(gallerySelector){var parseThumbnailElements=function(el){var thumbElements=el.childNodes,numNodes=thumbElements.length,items=[],figureEl,linkEl,size,item;for(var i=0;i<numNodes;i++){figureEl=thumbElements[i];if(figureEl.nodeType!==1){continue;}
linkEl=figureEl.children[0];size=linkEl.getAttribute('data-size').split('x');item={src:linkEl.getAttribute('href'),w:parseInt(size[0],10),h:parseInt(size[1],10)};if(figureEl.children.length>1){item.title=figureEl.children[1].innerHTML;}
if(linkEl.children.length>0){item.msrc=linkEl.children[0].getAttribute('src');}
item.el=figureEl;items.push(item);}
return items;};var closest=function closest(el,fn){return el&&(fn(el)?el:closest(el.parentNode,fn));};var onThumbnailsClick=function(e){e=e||window.event;e.preventDefault?e.preventDefault():e.returnValue=false;var eTarget=e.target||e.srcElement;var clickedListItem=closest(eTarget,function(el){return(el.tagName&&el.tagName.toUpperCase()==='FIGURE');});if(!clickedListItem){return;}
var clickedGallery=clickedListItem.parentNode,childNodes=clickedListItem.parentNode.childNodes,numChildNodes=childNodes.length,nodeIndex=0,index;for(var i=0;i<numChildNodes;i++){if(childNodes[i].nodeType!==1){continue;}
if(childNodes[i]===clickedListItem){index=nodeIndex;break;}
nodeIndex++;}
if(index>=0){openPhotoSwipe(index,clickedGallery);}
return false;};var photoswipeParseHash=function(){var hash=window.location.hash.substring(1),params={};if(hash.length<5){return params;}
var vars=hash.split('&');for(var i=0;i<vars.length;i++){if(!vars[i]){continue;}
var pair=vars[i].split('=');if(pair.length<2){continue;}
params[pair[0]]=pair[1];}
if(params.gid){params.gid=parseInt(params.gid,10);}
return params;};var openPhotoSwipe=function(index,galleryElement,disableAnimation,fromURL){var pswpElement=document.querySelectorAll('.pswp')[0],gallery,options,items;items=parseThumbnailElements(galleryElement);options={galleryUID:galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn:function(index){var thumbnail=items[index].el.getElementsByTagName('img')[0],pageYScroll=window.pageYOffset||document.documentElement.scrollTop,rect=thumbnail.getBoundingClientRect();return{x:rect.left,y:rect.top+pageYScroll,w:rect.width};},
mainClass:'pswp--dark',
preload: [1,2],
hideAnimationDuration:200,
showAnimationDuration:0,
bgOpacity: 0.7,
showHideOpacity:true,
closeOnScroll: true,
arrowKeys: true,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
counterEl: true,
arrowEl: true,
preloaderEl: true
};if(fromURL){if(options.galleryPIDs){for(var j=0;j<items.length;j++){if(items[j].pid==index){options.index=j;break;}}}else{options.index=parseInt(index,10)-1;}}else{options.index=parseInt(index,10);}
if(isNaN(options.index)){return;}
if(disableAnimation){options.showAnimationDuration=0;}
gallery=new PhotoSwipe(pswpElement,PhotoSwipeUI_Default,items,options);gallery.init();gallery.options.escKey=true;};var galleryElements=document.querySelectorAll(gallerySelector);for(var i=0,l=galleryElements.length;i<l;i++){galleryElements[i].setAttribute('data-pswp-uid',i+1);galleryElements[i].onclick=onThumbnailsClick;}
var hashData=photoswipeParseHash();if(hashData.pid&&hashData.gid){openPhotoSwipe(hashData.pid,galleryElements[hashData.gid-1],true,true);}};window.addEventListener('load', function () {initPhotoSwipeFromDOM('.gallery');}, false);</script><div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item"></div><div class="pswp__item"></div><div class="pswp__item"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--share" title="Share"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center"></div></div></div></div></div></body></html>