Audio player with custom layout

Asked

Viewed 1,653 times

1

I needed to make an audio player like this, I’m redoing the site on Html5. Can anyone tell me if it’s possible? Client does not want any layout changes.

Link to view: Link

html5

  • Yes, it is possible.

  • If you want to do it from scratch: http://webdesign.tutsplus.com/tutorials/create-customized-html5-audio-player-webdesign-7081 Something that is already very close to the goal: http://scmplayer.net/

  • Got it... Thanks. I would know if there is any framework for this?

  • There are ready-made players that can be customized like Scmplayer I quoted, Jwplayer etc... usually these players are too simple to create a framework wrapped around them.

  • You just want to know if it’s possible?

1 answer

1

There are some ways to do it. Case 1: Using HTML5 . Note: May not be supported in older browsers. The code would look like this:

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

If you choose to use a JS library for example: soundmanager . In this case just read the documentation and choose the formats and how to use it. A short example would look like this:

    <link href="css/360-player/360player.css" rel="stylesheet" type="text/css"/>
    <!-- special IE-only canvas fix -->
    <!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->

    <!-- Apache-licensed animation library -->
    <script type="text/javascript" src="js/berniecode-animator.js"></script>

    <!-- the core stuff -->
    <script type="text/javascript" src="js/soundmanager2.js"></script>
    <script type="text/javascript" src="js/360player.js"></script>
    <link href="css/demo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <h2>JS</h2>
    <div class="ui360"><a href="audio/dedinhos.mp3">Dedinhos</a></div>
    <div class="ui360"><a href="audio/jesus.mp3">Jesus</a></div>   
</body>

I hope I’ve helped.

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.