<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- audio-visualizer-qml.qdoc -->
<title>Qt 3D: Audio Visualizer Example | Qt 3D 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.9</td><td ><a href="qt3d-index.html">Qt 3D</a></td><td >Qt 3D: Audio Visualizer Example</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#qt-quick-2d-implementation">Qt Quick 2D Implementation</a></li>
<li class="level1"><a href="#qt-3d-implementation">Qt 3D Implementation</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt 3D: Audio Visualizer Example</h1>
<span class="subtitle"></span>
<!-- $$$audio-visualizer-qml-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/audio-visualizer-qml-example.png" alt="" /></p><p><i>Audio</i> Visualizer demonstrates how to implement an application that combines the use of Qt 3D rendering with Qt Quick 2D elements. The example uses media player to play music and it visualizes the magnitude of the music as animated bars.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="qt-quick-2d-implementation"></a>
<h2 id="qt-quick-2d-implementation">Qt Quick 2D Implementation</h2>
<p>The Qt Quick Implementation <a href="qt3d-audio-visualizer-qml-main-qml.html">main.qml</a> of the example uses <code>MediaPlayer</code> to play audio content.</p>
<pre class="qml">
<span class="type">MediaPlayer</span> {
<span class="name">id</span>: <span class="name">mediaPlayer</span>
<span class="name">autoPlay</span>: <span class="number">true</span>
<span class="name">volume</span>: <span class="number">0.5</span>
<span class="name">source</span>: <span class="string">"qrc:/music/tiltshifted_lost_neon_sun.mp3"</span>
</pre>
<p>The player is controlled with the <code>playButton</code> and c{stopButton}. Based on the clicked buttons the <code>state</code> of the <code>mainview</code> changes.</p>
<p>The 3D content is rendered using the <code>Scene3D</code> type. The state of the Audio Visualizer is maintained in the <code>mainview</code>. It's passed on to the <code>visualizer</code> as it's needed for the bar animations.</p>
<pre class="qml">
<span class="type">Scene3D</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="type">Visualizer</span> {
<span class="name">id</span>: <span class="name">visualizer</span>
<span class="name">animationState</span>: <span class="name">mainview</span>.<span class="name">state</span>
<span class="name">numberOfBars</span>: <span class="number">120</span>
<span class="name">barRotationTimeMs</span>: <span class="number">8160</span> <span class="comment">// 68 ms per bar</span>
}
}
</pre>
<a name="qt-3d-implementation"></a>
<h2 id="qt-3d-implementation">Qt 3D Implementation</h2>
<p>The 3D elements of the example are created in the <a href="qt3d-audio-visualizer-qml-visualizer-qml.html">Visualizer.qml</a>. The camera is set to a fixed position to show the visualized bars from a correct angle.</p>
<pre class="qml">
<span class="type"><a href="qml-qt3d-render-camera.html">Camera</a></span> {
<span class="name">id</span>: <span class="name">camera</span>
<span class="name">projectionType</span>: <span class="name">CameraLens</span>.<span class="name">PerspectiveProjection</span>
<span class="name">fieldOfView</span>: <span class="number">45</span>
<span class="name">aspectRatio</span>: <span class="number">1820</span> <span class="operator">/</span> <span class="number">1080</span>
<span class="name">nearPlane</span>: <span class="number">0.1</span>
<span class="name">farPlane</span>: <span class="number">1000.0</span>
<span class="name">position</span>: <span class="name">Qt</span>.<span class="name">vector3d</span>(<span class="number">0.014</span>, <span class="number">0.956</span>, <span class="number">2.178</span>)
<span class="name">upVector</span>: <span class="name">Qt</span>.<span class="name">vector3d</span>(<span class="number">0.0</span>, <span class="number">1.0</span>, <span class="number">0.0</span>)
<span class="name">viewCenter</span>: <span class="name">Qt</span>.<span class="name">vector3d</span>(<span class="number">0.0</span>, <span class="number">0.7</span>, <span class="number">0.0</span>)
}
</pre>
<p>A <code>NodeInstantiator</code> is used to create the bars that visualize the magnitude of the music.</p>
<pre class="qml">
<span class="comment">// Bars</span>
<span class="type"><a href="qml-qt3d-extras-cuboidmesh.html">CuboidMesh</a></span> {
<span class="name">id</span>: <span class="name">barMesh</span>
<span class="name">xExtent</span>: <span class="number">0.1</span>
<span class="name">yExtent</span>: <span class="number">0.1</span>
<span class="name">zExtent</span>: <span class="number">0.1</span>
}
<span class="type"><a href="qml-qt3d-core-nodeinstantiator.html">NodeInstantiator</a></span> {
<span class="name">id</span>: <span class="name">collection</span>
property <span class="type">int</span> <span class="name">maxCount</span>: <span class="name">parent</span>.<span class="name">numberOfBars</span>
<span class="name">model</span>: <span class="name">maxCount</span>
<span class="name">delegate</span>: <span class="name">BarEntity</span> {
<span class="name">id</span>: <span class="name">cubicEntity</span>
<span class="name">entityMesh</span>: <span class="name">barMesh</span>
<span class="name">rotationTimeMs</span>: <span class="name">sceneRoot</span>.<span class="name">barRotationTimeMs</span>
<span class="name">entityIndex</span>: <span class="name">index</span>
<span class="name">entityCount</span>: <span class="name">sceneRoot</span>.<span class="name">numberOfBars</span>
<span class="name">entityAnimationsState</span>: <span class="name">animationState</span>
<span class="name">magnitude</span>: <span class="number">0</span>
}
}
</pre>
<p>The <code>visualizer</code> also contains an <code>Entity</code> to show the progress. This element has a curve shaped mesh and it's rotated on a level to show the progress based on the duration of the played track.</p>
<pre class="qml">
<span class="comment">// Progress</span>
<span class="type"><a href="qml-qt3d-render-mesh.html">Mesh</a></span> {
<span class="name">id</span>: <span class="name">progressMesh</span>
<span class="name">source</span>: <span class="string">"qrc:/meshes/progressbar.obj"</span>
}
<span class="type"><a href="qml-qt3d-core-transform.html">Transform</a></span> {
<span class="name">id</span>: <span class="name">progressTransform</span>
property <span class="type">real</span> <span class="name">defaultStartAngle</span>: -<span class="number">90</span>
property <span class="type">real</span> <span class="name">progressAngle</span>: <span class="name">defaultStartAngle</span>
<span class="name">rotationY</span>: <span class="name">progressAngle</span>
}
<span class="type"><a href="qml-qt3d-core-entity.html">Entity</a></span> {
property <span class="type"><a href="qml-qt3d-render-material.html">Material</a></span> <span class="name">progressMaterial</span>: <span class="name">PhongMaterial</span> {
<span class="name">ambient</span>: <span class="string">"#80C342"</span>
<span class="name">diffuse</span>: <span class="string">"black"</span>
}
<span class="name">components</span>: [<span class="name">progressMesh</span>, <span class="name">progressMaterial</span>, <span class="name">progressTransform</span>]
}
</pre>
<p>In <a href="qt3d-audio-visualizer-qml-barentity-qml.html">BarEntity.qml</a> there are animations for rotating the bars and changing the bar color. The bars are rotated on a level following a ring form. At the same time the color of the bars is animated.</p>
<pre class="qml">
<span class="type">QQ2</span>.NumberAnimation {
<span class="name">id</span>: <span class="name">angleAnimation</span>
<span class="name">target</span>: <span class="name">angleTransform</span>
<span class="name">property</span>: <span class="string">"barAngle"</span>
<span class="name">duration</span>: <span class="name">rotationTimeMs</span>
<span class="name">loops</span>: <span class="name">QQ2</span>.<span class="name">Animation</span>.<span class="name">Infinite</span>
<span class="name">running</span>: <span class="number">true</span>
<span class="name">from</span>: <span class="name">startAngle</span>
<span class="name">to</span>: <span class="number">360</span> <span class="operator">+</span> <span class="name">startAngle</span>
}
QQ2.SequentialAnimation on <span class="name">barColor</span> {
<span class="name">id</span>: <span class="name">barColorAnimations</span>
<span class="name">running</span>: <span class="number">false</span>
<span class="type">QQ2</span>.ColorAnimation {
<span class="name">from</span>: <span class="name">lowColor</span>
<span class="name">to</span>: <span class="name">highColor</span>
<span class="name">duration</span>: <span class="name">animationDuration</span>
}
<span class="type">QQ2</span>.PauseAnimation {
<span class="name">duration</span>: <span class="name">animationDuration</span>
}
<span class="type">QQ2</span>.ColorAnimation {
<span class="name">from</span>: <span class="name">highColor</span>
<span class="name">to</span>: <span class="name">lowColor</span>
<span class="name">duration</span>: <span class="name">animationDuration</span>
}
}
</pre>
<p>The magnitude of each bar is read from a separate .raw file that is based on the track being played. As the bars rotate around the ring the height is scaled to highlight currently played position. After a full round of rotation, a new value is fetched for the bar.</p>
<p>Files:</p>
<ul>
<li><a href="qt3d-audio-visualizer-qml-barentity-qml.html">audio-visualizer-qml/BarEntity.qml</a></li>
<li><a href="qt3d-audio-visualizer-qml-visualizer-qml.html">audio-visualizer-qml/Visualizer.qml</a></li>
<li><a href="qt3d-audio-visualizer-qml-main-qml.html">audio-visualizer-qml/main.qml</a></li>
<li><a href="qt3d-audio-visualizer-qml-touchsettings-cpp.html">audio-visualizer-qml/touchsettings.cpp</a></li>
<li><a href="qt3d-audio-visualizer-qml-touchsettings-h.html">audio-visualizer-qml/touchsettings.h</a></li>
<li><a href="qt3d-audio-visualizer-qml-main-cpp.html">audio-visualizer-qml/main.cpp</a></li>
<li><a href="qt3d-audio-visualizer-qml-audio-visualizer-qml-pro.html">audio-visualizer-qml/audio-visualizer-qml.pro</a></li>
<li><a href="qt3d-audio-visualizer-qml-audio-visualizer-qml-qrc.html">audio-visualizer-qml/audio-visualizer-qml.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/albumcover.png">audio-visualizer-qml/images/albumcover.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/demotitle.png">audio-visualizer-qml/images/demotitle.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/normalmap.png">audio-visualizer-qml/images/normalmap.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/pausehoverpressed.png">audio-visualizer-qml/images/pausehoverpressed.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/pausenormal.png">audio-visualizer-qml/images/pausenormal.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/playhoverpressed.png">audio-visualizer-qml/images/playhoverpressed.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/playnormal.png">audio-visualizer-qml/images/playnormal.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/songtitle.png">audio-visualizer-qml/images/songtitle.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/stopdisabled.png">audio-visualizer-qml/images/stopdisabled.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/stophoverpressed.png">audio-visualizer-qml/images/stophoverpressed.png</a></li>
<li><a href="images/used-in-examples/audio-visualizer-qml/images/stopnormal.png">audio-visualizer-qml/images/stopnormal.png</a></li>
</ul>
</div>
<!-- @@@audio-visualizer-qml -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
