The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Mp3 player
Tony .
post Feb 11 2015, 05:02 PM
Post #1


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



Hi guys, i need your help again, i try to put a discography place in my website, but i haven't a player.. i'd like to be something like this :

IPB Image

I really want the name here cuz i did this :

<audio controls>
<source src="anysong.mp3" type="audio/mpeg">
</audio>

but i can't put the name of the song in this mode.. So .. any help ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 12 2015, 01:19 PM
Post #2


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



UP
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 12 2015, 01:57 PM
Post #3


Programming Fanatic
********

Group: Members
Posts: 1,663
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



The <source> element does support the title attribute. Can't you place the song title there? Or maybe in a <span> element?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 12 2015, 04:35 PM
Post #4


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I think i want a code man.. i just want to put the title of the song so i can play it..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 13 2015, 05:32 PM
Post #5


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



Or maybe to press on the song name and starts play automatically .. if you can't do like in the image..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 14 2015, 04:49 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You could try searching for "create audio playlist in html5".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 14 2015, 07:29 AM
Post #7


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I searched.. i didn't found what i wanted
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 14 2015, 10:06 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Doing that search, I found a few with a playlist. Though most of them also show the player itself, which you might hide through CSS.

E.g.:
http://jplayer.org/latest/demo-02/
http://jsfiddle.net/WsXX3/33/

Maybe even:
http://ie.microsoft.com/Testdrive/HTML5/HT...st/Default.html

At least, it's a start.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 14 2015, 04:21 PM
Post #9


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I found these too.. but i have to put 97 songs.. the one from microsoft is too huge.
The first it's a playlist.. and second it's a playlist too. Man , i don't want a playlist i want to click on the song name and to start playing, but not to get me on another page.. cuz i did this by myself with <a href> .. if you understand me.. I want exactly like in the photo. Or, how i said , to click on the song name and the song starts.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Feb 14 2015, 05:27 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,663
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Well, http://jsfiddle.net/WsXX3/33/ does exactly what you say you want. It provides links that you can click on to play a song. Maybe it is not exactly what you want but I think it is a good starting point.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 14 2015, 06:13 PM
Post #11


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



You should realise that in the image you posted, there is a playlist with for each song the title and the player next to it. Although, the player controls are set up with DIVs, as can be seen in the source of the url in the image: http://www.trupasing.ro/audio.php.

Besides, that web site uses the jPlayer plugin for jQuery. It's just a matter of how you create and customise it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 15 2015, 06:14 AM
Post #12


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



And that's exactly what i want, a playlist for every song:|

This post has been edited by Tony .: Feb 15 2015, 07:02 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 15 2015, 10:19 AM
Post #13


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I found this, but i don't know how to put it on my website biggrin.gif

http://www.schillmania.com/projects/soundm...r2/demo/bar-ui/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 15 2015, 05:16 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Inspect the one you like and copy that. You can even make some changes to the look, with the controls on the right.

For the rest, look around the resources of that page. You'll find everything you need there. The .js is even heavily commented.

Put everything together in a test page, and see if it works.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 15 2015, 05:30 PM
Post #15


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I tried, but it doesn't worked.. maybe i did something wronng. Can you give me the code?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 16 2015, 05:42 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Personally, I never use audio in web sites, so I can't give you the code.

Show us what you have so far, preferably by posting the url of your test page, so we get all necessary resources.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 16 2015, 04:58 PM
Post #17


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I don't think that helps you but meh. here you have it.
With this code i click on the name of them and it gets me to another page and starts the song with the player from <audio>

QUOTE
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<script src="js/jquery-1.6.3.min.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Vegur_700.font.js" type="text/javascript"></script>
<script src="js/Vegur_400.font.js" type="text/javascript"></script>
<script src="js/FF-cash.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>

</head>
<body id="page2">
<div class="extra">

<header>
<div class="main">
<div class="bg-1">
<h1><a href="index.html">ToniMusic HOME</a></h1>
</div>
<nav>
<div class="menu-bg-tail">
<div class="menu-bg">
<div class="container_12">
<div class="grid_12">
<ul class="menu">


</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</nav>
</div>
</header>

<section id="content"><div class="ic">Cafe Concert</div>
<div class="main">
<div class="content-padding-2">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<div class="padding-grid-1">
<h3 class="letter">Cafe concert<strong></strong></h3>
</div>
<div class="wrapper p3">
<article class="grid_4 alpha">
<div class="padding-grid-2">
<div class="wrapper">
<figure class="style-img-2 fleft"><a href="#"><img src="images/cafeconcert.jpg" width ="120" height="115" alt=""></a></figure>
</div>
</div>
</article>



<article class="grid_8 alpha">
<div class="padding-grid-2">
<h4 class="margin-none indent-top1"><strong>Cafe </strong>Concert</h4>

<div class="wrapper">



<ul class="list-1 fleft">
<li><a href="muzica/Corcovado.mp3">01. Corcovado</a></li>
<li><a href="muzica/ipanema.mp3">02. The girl from Ipanema</a></li>
<li><a href="muzica/autumn_leaves.mp3">03. Autumn leaves</a></li>
<li><a href="muzica/satin_doll.mp3">04. Satin doll</a></li>
</ul>
</div>
</div>
</article>
</div>

</div>
</div>
</div>
</div>
</div>

<div class="block"></div>
</section>
</div>

<footer>
<div class="main">
<div class="footer-bg">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<div class="footer-padding">
<div class="wrapper">

</div>
<div class="aligncenter">
Copyright &copy; 2008 - 2015 <a rel="nofollow" href="index.html" target="_blank">ToniMusic</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>



This post has been edited by Tony .: Feb 16 2015, 05:00 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 17 2015, 04:36 AM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Indeed, just the HTML code doesn't help.

I don't see a reference to the soundmanager2.js. I haven't read through its comments, but I assume it needs a certain way of coding of the HTML, including the CLASS names for the script to work.

Can't you post the url of your page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Tony .
post Feb 17 2015, 05:10 AM
Post #19


Member
***

Group: Members
Posts: 31
Joined: 4-February 15
Member No.: 22,145



I did it on my pc, but i'll upload it on my website when i get home.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 17 2015, 08:17 AM
Post #20


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



BTW, here's a link to the documentation of Soundmanager, found in the comments of the .js file : http://schillmania.com/projects/soundmanag...basic-inclusion

Probably good to start there.

See, a good reason to read the comments wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2019 - 07:24 AM