Audio Player

Developer
Cory
Size
7,940 Kb
Views
14,168
  1. Audio Player Previews
  2. Audio Player HTML Codes
  3. Audio Player CSS Codes
  4. Audio Player JS Codes

How do I make an audio player?

As a response to http://css-tricks.com/css-pie-timer/ I wrote this SVG Pie Timer.Credits: Heavily inspired by http://itpastorn.github.com/webbteknik/future-stuff/svg/color-wheel.html.. What is a audio player? How do you make a audio player? This script and codes were developed by Cory on 13 December 2022, Tuesday.

Audio Player Previews
IQ Test

Audio Player - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Audio Player</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure class="audio_module" data-require="audio"> <svg id="audio_player" class="audio_player_ui" preserveAspectRatio="xMidYMid" data-state="pause" viewbox="-150 -150 300 300" draggable="false"> <path id="" class="indicator track" transform="translate(0, 0)" draggable="false"/> <path id="progress" class="indicator progress" transform="translate(0, 0)" draggable="false"/> <path id="" class="indicator scrubber" transform="translate(0, 0)" draggable="false"/> <path id="" class="play_toggle" transform="translate(0, 0) scale(.9)" draggable="false"/> <text class="feedback" transform="translate(0 15)" text-anchor="middle"> <tspan id="text" class="timer" x="0" data-action="play">play</tspan> <tspan class="action" x="0" dy="-5">play</tspan> </text> </svg> <audio src="http://1stdraftdesign.com/wp-content/themes/sandbox/404d.mp3"></audio> </figure> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Audio Player - Script Codes CSS Codes

@import compass
$player_size: 300px
body background: #333
.audio_module display: block margin: 0 auto width: $player_size height: $player_size background: transparent cursor: pointer user-drag none -moz-user-select none -webkit-user-drag none * user-drag none -moz-user-select none -webkit-user-drag none .audio_player_ui position: relative .play_toggle stroke-width: 0 fill: transparent .indicator stroke-width: 1.5em fill: transparent .progress stroke: #fd0 pointer-events: none .scrubber stroke: hsla(0, 0%, 100%, .2) pointer-events: none .track stroke: hsla(0, 0%, 100%, .04) pointer-events: stroke .feedback font-family: 'Helvetica Neue', Helvetica, sans-serif text-align: center font-size: 3em font-style: italic fill: hsla(0, 0%, 100%, .08) opacity: 1 pointer-events: none .timer transition all 0.25s .play_toggle:hover & ~ .feedback .timer opacity: 0 & ~ .feedback .action opacity: 1 .action opacity: 0 transition all 0.5s

Audio Player - Script Codes JS Codes

(function() { (function() { var $, defaults, drawArc, formatSeconds, methods, pluginName, startTime, t, π; $ = jQuery; Math.arcAngle = function(x, y, deg) { var centerX, centerY, deltaX, deltaY, radius, theta; centerX = 0; centerY = 0; radius = Math.sqrt((x * x) + (y * y)); deltaX = x; deltaY = y + radius; theta = Math.acos(1 - ((deltaX * deltaX + deltaY * deltaY) / (2 * radius * radius))); if (x < 0) { theta = (2 * π) - theta; } if (deg) { return theta * (180 / Math.PI); } else { return theta; } }; pluginName = 'audio'; π = Math.PI; t = 60; startTime = window.mozAnimationStartTime || Date.now(); formatSeconds = function(sec) { var mins, secs; mins = parseFloat(sec / 60, 10).toFixed(); secs = Math.floor(sec % 60); if (secs.toString().length < 2) { secs = "0" + secs; } return mins + ":" + secs; }; drawArc = function(theta, r, $elem) { var d, largeArcFlag, sweepFlag, x, y, zero; largeArcFlag = theta > π ? 1 : 0; sweepFlag = theta < (2 * π) ? 1 : 0; zero = 1e-10; x = r * Math.sin(theta); if (Math.abs(x) <= zero) { x = 0; } y = -(r * Math.cos(theta)); d = "M 0 " + (-r) + " v 0 A " + r + " " + r + " 1 " + largeArcFlag + " " + sweepFlag + " " + x + " " + y; return $elem.attr('d', d); }; defaults = { r: 100, visualizer: '.audio_player', progress_indicator: '.progress', track: '.track', scrubber: '.scrubber', play_toggle: '.play_toggle', timer: '.timer' }; methods = { init: function(options) { return this.each(function() { var $this, data, opts; $this = $(this); data = $this.data(pluginName); opts = $.extend({}, opts, defaults); if (!data) { data = opts; data.$player = $this.find(opts.visualizer); data.$progress = $this.find(opts.progress_indicator); data.$play_toggle = $this.find(opts.play_toggle); data.$track = $this.find(opts.track); data.$track.attr('d', "M 0 " + (-data.r) + " v 0 A " + data.r + " " + data.r + " 1 1 1 -.1 -100"); data.$scrubber = $this.find(opts.scrubber); data.$timer = $this.find(opts.timer); data.$audio = $this.find('audio'); data.at = 0; data.mousedown = [false, false, false]; data.$play_toggle.attr('d', "M 0 " + (-data.r) + " v 0 A " + data.r + " " + data.r + " 1 1 1 -.1 -100"); data.$audio.on('canplaythrough', function(e) { var d; d = $this.data(pluginName); d.audioReady = true; d.$timer.text("/" + (formatSeconds(data.duration))); return $this.data(pluginName, d); }); data.$audio.on('loadedmetadata', function(e) { var d; d = $this.data(pluginName); d.duration = d.$audio[0].duration; return $this.data(pluginName, d); }); data.$audio.on('ended', function(e) { return methods.reset.call($this[0]); }); data.$track.on('mouseleave', function(e) { return data.$scrubber.attr('d', "M 0 " + (-data.r) + " v 0 A " + data.r + " " + data.r + " 1 1 1 0 -100"); }); data.$track.on('mousedown', function(e) { return data.mousedown[e.button] = true; }); $(window).on('mouseup', function(e) { return data.mousedown[e.button] = false; }); data.$track.on('mousemove mousedown', function(e) { var angle, arcAsRatio, dAttr, offsetX, offsetY, theta, translation, viewBox, x, xArcStart, xTrack, y, yArcStart, yTrack; data = $this.data(pluginName); if (data.mousedown[0]) { dAttr = data.$scrubber.attr('d'); dAttr = dAttr.split(' '); xArcStart = 0; yArcStart = -data.r; xTrack = parseFloat(dAttr[dAttr.length - 2], 10); yTrack = parseFloat(dAttr[dAttr.length - 1], 10); angle = Math.arcAngle(xTrack, yTrack); arcAsRatio = angle / (2 * π); methods.scrubTo.call($this[0], arcAsRatio); } if (e.type === 'mousemove') { viewBox = document.querySelector('#audio_player').getAttribute('viewBox'); viewBox = viewBox ? viewBox.split(' ') : []; translation = viewBox.slice(0, 2); if (translation.length !== 2) { translation = [0, 0]; } offsetX = e.originalEvent.hasOwnProperty('offsetX') ? e.offsetX : e.originalEvent.layerX; offsetY = e.originalEvent.hasOwnProperty('offsetY') ? e.offsetY : e.originalEvent.layerY; x = offsetX + parseInt(translation[0], 10); y = offsetY + parseInt(translation[1], 10); theta = Math.arcAngle(x, y); return drawArc(theta, data.r, data.$scrubber); } }); data.$play_toggle.on('click', function(e) { var curr_state; curr_state = $this.attr('data-state'); if (curr_state === 'play') { return methods.pause.call($this[0]); } else { return methods.play.call($this[0]); } }); data.$audio.on('ended', function() { return methods.reset.call($this[0]); }); $(window).on('keyup', function(e) { if (e.which === 32) { e.preventDefault(); data.$play_toggle.trigger('click'); return false; } }); $(window).on('keydown', function(e) { if (e.which === 32) { return e.preventDefault(); } }); $this.data(pluginName, data); if (data.$audio[0].duration) { data.$audio.trigger('loadedmetadata'); return data.$audio.trigger('canplaythrough'); } } }); }, play: function() { var $player, animate, data; $player = $(this); data = $player.data(pluginName || {}); animate = function() { var diff, drawStart, Θi; drawStart = Date.now(); diff = drawStart - startTime; if ($player.attr('data-state') !== 'pause' && data.at < (2 * π)) { if (diff >= t) { Θi = (2 * π) * (diff / 1000) / data.duration; data.at += Θi || 0; drawArc(data.at, data.r, data.$progress); startTime = drawStart; data.$timer.text("/" + (formatSeconds(data.$audio[0].currentTime))); } return window.requestAnimationFrame(animate); } else { return startTime = void 0; } }; if (data.audioReady || data.$audio[0].duration) { this.setAttribute('data-state', 'play'); this.querySelector('.action').textContent = $(this).attr('data-state') === 'play' ? 'pause' : 'play'; this.querySelector('audio').play(); startTime = window.mozAnimationStartTime || Date.now(); return requestAnimationFrame(animate); } }, pause: function() { this.setAttribute('data-state', 'pause'); this.querySelector('.action').textContent = $(this).attr('data-state') === 'play' ? 'pause' : 'play'; return this.querySelector('audio').pause(); }, reset: function() { var data; data = $(this).data(pluginName || {}); data.$progress.attr('d', "M 0 " + (-data.r) + " v 0 A " + data.r + " " + data.r + " 1 0 1 .00001 -100"); data.$audio.currentTime = 0; data.at = 0; return this.setAttribute('data-state', 'pause'); }, scrubTo: function(time) { var $module, audio, data; $module = $(this); data = $module.data(pluginName); audio = data.$audio[0]; audio.currentTime = time * audio.duration; data.at = 2 * π * time; return drawArc(data.at, data.r, data.$progress); } }; if (!window.requestAnimationFrame) { window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function(func) { return setTimeout(func, t); }; } return $.fn[pluginName] = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { return $.error("Wha\'cho talkin\' \'bout Willis? There ain't no method " + method + " here."); } }; })(); (function() { return window.jQuery(document).ready(function() { return $('.audio_module').audio(); }); })();
}).call(this);
Audio Player - Script Codes
Audio Player - Script Codes
Home Page Home
Developer Cory
Username uniqname
Uploaded December 13, 2022
Rating 3
Size 7,940 Kb
Views 14,168
Do you need developer help for Audio Player?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Cory (uniqname) Script Codes
Name
Javascript Digital Clock Example
Floating Labels
A content slider
Paper like dialog compoent
CSA-React POC
X-Picture tag
JS REPL
React Carousel POC
PictureTime
Hover activated accordian with default state
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!