Functional Record / Audio Player

Share your Work
1

This is quick demo of a record player that loads and plays records when clicking on a track.

Some more work to do.

See It Here

Update 28/1/16

Added more tracks.
Timeline - moveable playhead.
Skip to end button.

Update 31/1/16
Added function - slide progress bar to seek track.
Added info button and panel

Any more ideas let me know

Here is the template symbol

Also there are no tracks in the resources folder - to add tracks edit the info inside chooseTrack()

DOUBLY IMPORTANT This is a symbol. To add it to any project use Symbol->Import Symbol… in the hype menu.

turntable-v3.zip (799.6 KB)

1 Like
2

Awesome work!

Here’s another turntable example with some similar effects by @BigPoppaE: http://tumult.com/hype/gallery/TurnTableBigPoppaE/TurnTableBigPoppaE.hype.zip

(View live)

3

Good stuff. I chose to just use Hype for the moveable parts in my example to show what one can do in Hype. I’ll probably make one with artwork at the end.

4

Bump!

I’ve updated the post above and included the .zip file. If anyone wants me to add any functionality let me know. Feel free to use it in any of your projects. A little mention of who made it would be nice :wink: Enjoy.

1 Like
5

Hi,

In the config() function which is the first to run from the symbol. You can change the line.

window.symbol = hypeDocument.getSymbolInstanceById('turntable');

To

//-- We get symbol object. Cannot use element argument directly for a symbol. Must declare it as an instance
 	window.symbol =  hypeDocument.getSymbolInstanceById(element.id);

Because it is the symbol that calls the config() function the symbol is registered as the element arg. (as an element not a symbolnstance )
Which means you do not need to worry about giving the symbol an id yourself with this change

1 Like
6

indeed … as per our other conversation the same applies. Have uploaded a version with that in mind.

1 Like
7

Love this @DBear ,

If you wanted one that did not require you to edit the project overtime you wanted to update the tracks, you could do this.

Create a link to an external .js file with the details for each track.

//-- TurntableList.js

        window.music =  [ 	{label:"Justin Bieber-Sorry",
                            track:"Blues-Loop.mp3",
                            artwork:"turnblue.jpg",
                            caption:"'Sorry' is a song recorded by Canadian singer Justin Bieber for his fourth studio album Purpose. Written by Julia Michaels, Justin Tranter and Bieber, the song was released on October 23, 2015, as the second single from the album.[1] Sorry was well-received by music critics, and was a commercial success. The song has peaked at number one on the Canadian Hot 100. Outside Canada, the song topped the charts in nine countries, including New Zealand, the United States and the United Kingdom, and peaked within the top ten of the charts in nineteen countries, including Australia and Germany"},
                    
                    {label:"Zara Larsson_MNEK - Never Forget You",
                        track:"Pizzi01-Cmin.mp3",
                        artwork:"goldfrapp.JPG",
                        caption: "'Never Forget' You is a song by British recording artist MNEK and Swedish singer Zara Larsson. The song was released in the United Kingdom on 22 July 2015 as a digital download. The song peaked at number 5 on the UK Singles Chart, number 2 in Norway, number 1 in Sweden, number 3 in Denmark and 4 in Finland. The single is certified platinum in Sweden. An acoustic version was performed on the CBBC Official Chart Show on 23 October 2015."  }]
    
    
    window.baseTrackPath = './Tracks/';
    window.basePathArtwork = './Artwork/';

The tracks and images would be held out side of the hype resource folder . i.e the directory hierarchy would look like.

/Site/turntable.html
/Site/turntable.hyperesources
/Site/Artwork/justin.jpg
/Site/Tracks/justin.mp3

This version does just that.

Meaning you can add your mp3 files to the Tracks folder, the Artwork to the Artwork folder and list everything in the external js. You will not need to edit the Hype project and the end user probably can do this theirselves especially if they will likely mangle the hype project.

I have included in the the two folders needed and an example TurntableList.js example.
Also an exported html &folder example.

turntable-v4.zip (1.5 MB)

2 Likes
8

Cool! Thanks for this examples! Please how I do for play tracks automatically in this turntable player?

9

( Hack alert)
Would think you could add something like

setTimeout( function () {
    					 
    	hypeDocument.functions().playTrack(hypeDocument, element, event);
    				}, 2300);

To the end of the chooseTrack() function

10

Sorry, I did what you said but it did not work :confused: . I would like playlist to be played in sequence. Thanks in advance.

11

It does work, just not how you want :smile:

Not sure it makes sense to make that sort of adjustment to this particular project.
It may be better starting a new thread asking how to play a set of audio files in sequence.