Software Archive
Read-only legacy content
17061 Discussions

Music template needed from SDK team please

ben4
Beginner
407 Views

Hello,

 

I was looking at this tutorial here:

http://qnimate.com/create-a-music-player-app-using-intel-xdk/

 

I am not sure this can play songs in a playlist automatically.

Like any artists, having a template where we could just drop our songs(either offline or streamed from a web server) + having the possibility to create playlist from a list of songs would be a fantastic template to get from the SDK team.

Will you even think about making one please? This would benefit greatly a huge amount of music fans.

 

Also, based on the link I posted above, what is the best way to have a page with plenty of my songs that play automatically(the whole list in loop and in different orders each time).

I am a bit lost on where to start with javascript.

Thank you.

Ben

0 Kudos
8 Replies
PaulF_IntelCorp
Employee
407 Views

That sample is based on some cordova plugins that have been retired and are no longer supported. The article is based on a very old version of the XDK.

We do not have the resources to invest in lots of general-purpose templates and samples, our support effort is primarily centered on insuring you can build and debug Cordova apps with the XDK. The XDK creates standard Cordova apps, if you can find an example of a Cordova or PhoneGap app that does what you want you should be able to import that code into an XDK project and use it there.

0 Kudos
ben4
Beginner
407 Views

Hi Paul,

 

I see,it is hard for beginners because we have a great platform here but cannot build much with it due to the lack of tutorials for common uses like Audio players.

So you are telling me that if I find examples using Cordova pr phone gap I should be able to important this in the software.

For example, I found this:

https://github.com/homerours/cordova-music-controls-plugin

 

Now with this code what shall I do, shall I include the js file in the header of the app and drop that code in the index.html? Like if I was creating a simple html website or is there something else to think about?

 

My problem is that I am not understanding really what happens when your software compile the final code, what does it do? Can a simple html web page I build with my normal html editor be opened in the intel sdk and compiled as an sdk file or is it more complex than this?

 

Thank you.

 

Ben

0 Kudos
ben4
Beginner
407 Views

Each time I try to import a Cordva plugin, I get an error from the intel xdk software.

For example, I copied and pasted the github url from this:

https://github.com/homerours/cordova-music-controls-plugin

 

Into the Cordova plugins explorer>>Third party plugins>>repo url

but I keep getting this type of error:

Cannot plugin xml for plugin.

 

I tried many cordova git hub urls tonight and none are working.

 

What am I doing wrong please?

 

Thank you.

 

Ben

0 Kudos
PaulF_IntelCorp
Employee
407 Views

Ben -- I was able to add that plugin using the third-party plugin add feature. See the image below.

There is no compilation step. We use standard Cordova CLI to "package" your HTML5 app into a standard Cordova framework that allows your HTML5 code to run in the webview on the device. Please see the XDK documentation and search the Cordova and PhoneGap blogs for additional help in understanding how Cordova works.

Screen Shot 2016-07-19 at 2.42.45 PM.png

0 Kudos
ben4
Beginner
407 Views

Hi Paul,

 

Sorry for the delay in replying to you but I was having ram problems with my pc.

You are right it worked aswell for me, I had to first update the intel sdk software as it seems that I have a bug, I could not add a single library.

 

Now the library is added, I am not really sure how to show the controls and have a single song to play, would it be possible to give it a tiny bit of help so I go in the right direction please?

Regarding building the pages, buttons, links and others, I am ok with the boostrap 3 framework, but y struggle is about having this:

Song 1

Song 2

Song 3

Song 4

Play all in Shuffle or individually.

 

That´s all I am trying to do.

 

Thank you,

 

Ben

 

<!DOCTYPE html>
<html>
<!--
  * Please see the included README.md file for license terms and conditions.
  -->
<head>
    <title>Blank App Designer Cordova Web App Project Template</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--
  * The "meta viewport" tag (below) helps your app size appropriately to a device's ideal viewport.
  * Note that Windows device viewports work better when initialized using the @viewport CSS rule.
  * For a quick overview of "meta viewport" and @viewport, see this article:
  *   http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag
  * To see how it works, try your app on a real device with and without a "meta viewport" tag.
  * Additional useful references include:
  *   http://www.quirksmode.org/mobile/viewports.html
  *   http://www.quirksmode.org/mobile/metaviewport/devices.html
  *   https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
-->

    <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

    <style>
    /* following three (cascaded) are equivalent to above three meta viewport statements */
    /* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
    /* see http://dev.w3.org/csswg/css-device-adapt/ */
        @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
        /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
    </style>

    <link rel="stylesheet" href="css/app.css">

    <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
    <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
    <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->

    <!-- Recommended location for your JavaScript libraries -->
    <!-- These library references (below) are just examples to give you the general idea... -->
    <!-- <script src="lib/mc/hammer.js"></script> -->
    <!-- <script src="lib/ft/fastclick.js"></script> -->

<!--
  * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
  * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message caused by this "cordova.js" script?
  * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
  * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
-->
    <script src="cordova.js" id="xdkJScordova_"></script>

    <script src="js/app.js"></script>           <!-- for your event code, see README and file comments for details -->
    <script src="js/init-app.js"></script>      <!-- for your init code, see README and file comments for details -->
    <script src="xdk/init-dev.js"></script>     <!-- normalizes device and document ready events, see file for details -->
</head>


<body>

<script>
    MusicControls.create({
    track       : 'Time is Running Out',        // optional, default : ''
    artist      : 'Muse',                       // optional, default : ''
    cover       : 'albums/1.jpg',      // optional, default : nothing
    // cover can be a local path (use fullpath 'file:///storage/emulated/...', or only 'my_image.jpg' if my_image.jpg is in the www folder of your app)
    //           or a remote url ('http://...', 'https://...', 'ftp://...')
    isPlaying   : true,                         // optional, default : true
    dismissable : true,                         // optional, default : false

    // hide previous/next/close buttons:
    hasPrev   : false,      // show previous button, optional, default: true
    hasNext   : false,      // show next button, optional, default: true
    hasClose  : true,       // show close button, optional, default: false

    // Android only, optional
    // text displayed in the status bar when the notification (and the ticker) are updated
    ticker    : 'Now playing "Time is Running Out"'
}, onSuccess, onError);
</script>
</body>
</html>

 

0 Kudos
PaulF_IntelCorp
Employee
407 Views

I'm sorry, but we don't have the resources available to help you write an app, we're only able to help with issues related to making the debuggers and builders work. For pure coding your best bet is to look for online examples of HTML5 single-page web apps and Cordova and PhoneGap apps. The XDK creates standard Cordova apps, so those programming solutions that work with Cordova will also work with the XDK.

You can also look at how the various samples are constructed for additional help.

0 Kudos
ben4
Beginner
407 Views

Hi Paul,

 

Thank you, yes unfortunately I cannot find a single web page that shows the whole process.

No worry, I will have to go back to my old Mobile app builder as I cannot build anything with the Intel Sdk apart from very basic apps, the lack of tutorials is what pushes me away from it, it is sad because it is a very nice piece of software.

I think if Intel wanted more people to use this software, they should let 1 person develop many templates non stop, this would really create a successful platform for Intel.

 

Regards,

 

Ben

0 Kudos
Thomas_B_6
New Contributor I
407 Views

Hi Ben,

your problem seems not to be related to the XDK.

If you have just four given files, why not put the url into an array and shuffle next song after the current one has finished?

If the shuffle returns the current url, just skip and reshuffle again.

There are plenty of turorials for Phonegap/Cordova playing a audio file.

You only have to implement the shuffle part, and watch the media finished play event.

Play, pause etc. is the same as in other HTML/Cordova examples, tutorials.

Best,

T.

0 Kudos
Reply