first commit
This commit is contained in:
DIYgod
commit
2022f6a1a0
|
|
@ -0,0 +1 @@
|
|||
AnotherPlayer
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
|
||||
<OptionsSetting value="true" id="Add" />
|
||||
<OptionsSetting value="true" id="Remove" />
|
||||
<OptionsSetting value="true" id="Checkout" />
|
||||
<OptionsSetting value="true" id="Update" />
|
||||
<OptionsSetting value="true" id="Status" />
|
||||
<OptionsSetting value="true" id="Edit" />
|
||||
<ConfirmationsSetting value="0" id="Add" />
|
||||
<ConfirmationsSetting value="0" id="Remove" />
|
||||
</component>
|
||||
<component name="ProjectRootManager" version="2" />
|
||||
</project>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$USER_HOME$/Code/Project/APlayer/.idea/APlayer.iml" filepath="$USER_HOME$/Code/Project/APlayer/.idea/APlayer.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="" vcs="" />
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,299 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="22b1f737-2314-4042-9004-1c8d5aa527e1" name="Default" comment="" />
|
||||
<ignored path="AnotherPlayer.iws" />
|
||||
<ignored path=".idea/workspace.xml" />
|
||||
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
|
||||
<option name="TRACKING_ENABLED" value="true" />
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||
</component>
|
||||
<component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
|
||||
<component name="CreatePatchCommitExecutor">
|
||||
<option name="PATCH_PATH" value="" />
|
||||
</component>
|
||||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||
<component name="FavoritesManager">
|
||||
<favorites_list name="AnotherPlayer" />
|
||||
</component>
|
||||
<component name="FileEditorManager">
|
||||
<leaf>
|
||||
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/demo/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-14.666667">
|
||||
<caret line="22" column="11" selection-start-line="11" selection-start-column="8" selection-end-line="22" selection-end-column="11" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="APlayer.css" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/APlayer.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="132" column="16" selection-start-line="132" selection-start-column="16" selection-end-line="132" selection-end-column="16" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="README.md" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/README.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state>
|
||||
<first_editor vertical-scroll-proportion="0.15920398">
|
||||
<caret line="6" column="40" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="40" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="package.json" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-8.0">
|
||||
<caret line="12" column="15" selection-start-line="12" selection-start-column="15" selection-end-line="12" selection-end-column="15" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="APlayer.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/APlayer.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="84" column="35" selection-start-line="84" selection-start-column="35" selection-end-line="84" selection-end-column="35" />
|
||||
<folding>
|
||||
<marker date="1447492033000" expanded="true" signature="1139:1148" placeholder="..." />
|
||||
<marker date="1447492033000" expanded="true" signature="1220:1227" placeholder="..." />
|
||||
<marker date="1447492033000" expanded="true" signature="1220:1229" placeholder="..." />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="JavaScript File" />
|
||||
<option value="CSS File" />
|
||||
<option value="Html5" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="IdeDocumentHistory">
|
||||
<option name="CHANGED_PATHS">
|
||||
<list>
|
||||
<option value="$USER_HOME$/Code/Project/AnotherPlayer/APlayer.js" />
|
||||
<option value="$USER_HOME$/Code/Project/AnotherPlayer/demo/index.html" />
|
||||
<option value="$USER_HOME$/Code/Project/AnotherPlayer/APlayer.css" />
|
||||
<option value="$USER_HOME$/Code/Project/AnotherPlayer/README.md" />
|
||||
<option value="$USER_HOME$/Code/Project/APlayer/demo/index.html" />
|
||||
<option value="$USER_HOME$/Code/Project/APlayer/package.json" />
|
||||
<option value="$USER_HOME$/Code/Project/APlayer/README.md" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="JsBuildToolGruntFileManager" detection-done="true" />
|
||||
<component name="JsGulpfileManager">
|
||||
<detection-done>true</detection-done>
|
||||
</component>
|
||||
<component name="NamedScopeManager">
|
||||
<order />
|
||||
</component>
|
||||
<component name="ProjectFrameBounds">
|
||||
<option name="y" value="23" />
|
||||
<option name="width" value="1280" />
|
||||
<option name="height" value="721" />
|
||||
</component>
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="false">
|
||||
<OptionsSetting value="true" id="Add" />
|
||||
<OptionsSetting value="true" id="Remove" />
|
||||
<OptionsSetting value="true" id="Checkout" />
|
||||
<OptionsSetting value="true" id="Update" />
|
||||
<OptionsSetting value="true" id="Status" />
|
||||
<OptionsSetting value="true" id="Edit" />
|
||||
<ConfirmationsSetting value="0" id="Add" />
|
||||
<ConfirmationsSetting value="0" id="Remove" />
|
||||
</component>
|
||||
<component name="ProjectView">
|
||||
<navigator currentView="ProjectPane" proportions="" version="1">
|
||||
<flattenPackages />
|
||||
<showMembers />
|
||||
<showModules />
|
||||
<showLibraryContents />
|
||||
<hideEmptyPackages />
|
||||
<abbreviatePackageNames />
|
||||
<autoscrollToSource />
|
||||
<autoscrollFromSource />
|
||||
<sortByType />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scope" />
|
||||
<pane id="Scratches" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<PATH>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="AnotherPlayer" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
|
||||
</PATH_ELEMENT>
|
||||
<PATH_ELEMENT>
|
||||
<option name="myItemId" value="APlayer" />
|
||||
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
|
||||
</PATH_ELEMENT>
|
||||
</PATH>
|
||||
</subPane>
|
||||
</pane>
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
<property name="WebServerToolWindowFactoryState" value="true" />
|
||||
<property name="list.type.of.created.stylesheet" value="CSS" />
|
||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||
<property name="DefaultHtmlFileTemplate" value="Html5" />
|
||||
</component>
|
||||
<component name="RunManager">
|
||||
<configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="DartUnitRunConfigurationType" factoryName="DartUnit">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma" config-file="">
|
||||
<envs />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="JsTestDriver-test-runner" factoryName="JsTestDriver">
|
||||
<setting name="configLocationType" value="CONFIG_FILE" />
|
||||
<setting name="settingsFile" value="" />
|
||||
<setting name="serverType" value="INTERNAL" />
|
||||
<setting name="preferredDebugBrowser" value="Chrome" />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" working-dir="">
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
|
||||
<option name="cucumberJsArguments" value="" />
|
||||
<option name="executablePath" />
|
||||
<option name="filePath" />
|
||||
<method />
|
||||
</configuration>
|
||||
<configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
|
||||
<method />
|
||||
</configuration>
|
||||
</component>
|
||||
<component name="ShelveChangesManager" show_recycled="false" />
|
||||
<component name="SvnConfiguration">
|
||||
<configuration />
|
||||
</component>
|
||||
<component name="TaskManager">
|
||||
<task active="true" id="Default" summary="Default task">
|
||||
<changelist id="22b1f737-2314-4042-9004-1c8d5aa527e1" name="Default" comment="" />
|
||||
<created>1447381006709</created>
|
||||
<option name="number" value="Default" />
|
||||
<updated>1447381006709</updated>
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="0" y="23" width="1280" height="721" extended-state="6" />
|
||||
<editor active="true" />
|
||||
<layout>
|
||||
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Remote Host" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.24959612" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
|
||||
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
|
||||
</layout>
|
||||
</component>
|
||||
<component name="Vcs.Log.UiProperties">
|
||||
<option name="RECENTLY_FILTERED_USER_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
<option name="RECENTLY_FILTERED_BRANCH_GROUPS">
|
||||
<collection />
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
<component name="XDebuggerManager">
|
||||
<breakpoint-manager />
|
||||
<watches-manager />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/APlayer.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="84" column="35" selection-start-line="84" selection-start-column="35" selection-end-line="84" selection-end-column="35" />
|
||||
<folding>
|
||||
<marker date="1447492033000" expanded="true" signature="1139:1148" placeholder="..." />
|
||||
<marker date="1447492033000" expanded="true" signature="1220:1227" placeholder="..." />
|
||||
<marker date="1447492033000" expanded="true" signature="1220:1229" placeholder="..." />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/demo/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-14.666667">
|
||||
<caret line="22" column="11" selection-start-line="11" selection-start-column="8" selection-end-line="22" selection-end-column="11" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/APlayer.css">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="0.0">
|
||||
<caret line="132" column="16" selection-start-line="132" selection-start-column="16" selection-end-line="132" selection-end-column="16" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state vertical-scroll-proportion="-8.0">
|
||||
<caret line="12" column="15" selection-start-line="12" selection-start-column="15" selection-end-line="12" selection-end-column="15" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$USER_HOME$/Code/Project/APlayer/README.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state>
|
||||
<first_editor vertical-scroll-proportion="0.15920398">
|
||||
<caret line="6" column="40" selection-start-line="6" selection-start-column="0" selection-end-line="6" selection-end-column="40" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -0,0 +1,236 @@
|
|||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('font/fontello.eot?72550380');
|
||||
src: url('font/fontello.eot?72550380#iefix') format('embedded-opentype'),
|
||||
url('font/fontello.woff?72550380') format('woff'),
|
||||
url('font/fontello.ttf?72550380') format('truetype'),
|
||||
url('font/fontello.svg?72550380#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-weibo:before {
|
||||
content: '\e805';
|
||||
}
|
||||
|
||||
.icon-play:before {
|
||||
content: '\e806';
|
||||
}
|
||||
|
||||
.icon-pause:before {
|
||||
content: '\e807';
|
||||
}
|
||||
|
||||
.icon-to-start:before {
|
||||
content: '\e808';
|
||||
}
|
||||
|
||||
.icon-to-end:before {
|
||||
content: '\e809';
|
||||
}
|
||||
|
||||
.icon-list:before {
|
||||
content: '\e80a';
|
||||
}
|
||||
|
||||
.icon-menu:before {
|
||||
content: '\e80b';
|
||||
}
|
||||
|
||||
.icon-volume-off:before {
|
||||
content: '\e800';
|
||||
}
|
||||
|
||||
.icon-volume-down:before {
|
||||
content: '\e801';
|
||||
}
|
||||
|
||||
.icon-volume-up:before {
|
||||
content: '\e802';
|
||||
}
|
||||
|
||||
.aplayer {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
margin: 5px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
border-radius: 2px;
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.aplayer-pic {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 66px;
|
||||
}
|
||||
|
||||
.aplayer-pic img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.aplayer-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.aplayer-button {
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.aplayer-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.aplayer-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.aplayer-play {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #fff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -15px 0 0 -15px;
|
||||
}
|
||||
|
||||
.aplayer-play .icon-play {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.aplayer-pause {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid #fff;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.aplayer-pause .icon-pause {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.aplayer-info {
|
||||
margin-left: 66px;
|
||||
padding: 17px 7px 0 10px;
|
||||
}
|
||||
|
||||
.aplayer-music {
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
.aplayer-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.aplayer-author {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.aplayer-music a {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.aplayer-music a:hover {
|
||||
color: #E90F24;
|
||||
}
|
||||
|
||||
.aplayer-controller {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aplayer-bar-wrap {
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.aplayer-bar {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #cdcdcd;
|
||||
}
|
||||
|
||||
.aplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #aaa;
|
||||
height: 2px;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.aplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: #b7daff;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.aplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
border: 1px solid #b7daff;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aplayer-time {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -5px;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.icon-volume-down {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
function APlayer(option) {
|
||||
this.option = option;
|
||||
this.init();
|
||||
}
|
||||
|
||||
APlayer.prototype.init = function () {
|
||||
this.option.element.innerHTML = ''
|
||||
+ '<div class="aplayer-pic">'
|
||||
+ '<img src="' + this.option.music.pic + '">'
|
||||
+ '<div class="aplayer-button aplayer-pause aplayer-hide">'
|
||||
+ '<i class="demo-icon icon-pause"></i>'
|
||||
+ '</div>'
|
||||
+ '<div class="aplayer-button aplayer-play">'
|
||||
+ '<i class="demo-icon icon-play"></i>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="aplayer-info">'
|
||||
+ '<div class="aplayer-music">'
|
||||
+ '<span class="aplayer-title">' + this.option.music.title + '</span>'
|
||||
+ '<span class="aplayer-author"> - ' + this.option.music.author + '</span>'
|
||||
+ '<a href="#" title="分享至微博"><i class="demo-icon icon-weibo"></i></a>'
|
||||
+ '</div>'
|
||||
+ '<div class="aplayer-controller">'
|
||||
+ '<div class="aplayer-bar-wrap">'
|
||||
+ '<div class="aplayer-bar">'
|
||||
+ '<div class="aplayer-loaded" style="width: 0%"></div>'
|
||||
+ '<div class="aplayer-played" style="width: 0%">'
|
||||
+ '<span class="aplayer-thumb"></span>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<span class="aplayer-time"> - <span class="aplayer-ptime">00:00</span>/<span class="aplayer-dtime">00:00</span><i class="demo-icon icon-volume-down"></i></span>'
|
||||
+ '</div>'
|
||||
+ '</div>';
|
||||
|
||||
var _self = this;
|
||||
this.audio = document.createElement("audio");
|
||||
this.audio.src = this.option.music.url;
|
||||
this.audio.loop = true;
|
||||
|
||||
this.audio.addEventListener('durationchange', function() {
|
||||
_self.option.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration);
|
||||
});
|
||||
this.audio.addEventListener('canplay', function() {
|
||||
_self.loadedTime = setInterval(function () {
|
||||
var percentage = _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration;
|
||||
_self.updateBar.call(_self, 'loaded', percentage);
|
||||
if (percentage === 1) {
|
||||
clearInterval(_self.loadedTime);
|
||||
}
|
||||
}, 500);
|
||||
});
|
||||
|
||||
this.playButton = this.option.element.getElementsByClassName('aplayer-play')[0];
|
||||
this.pauseButton = this.option.element.getElementsByClassName('aplayer-pause')[0];
|
||||
this.playButton.addEventListener('click', function () {
|
||||
_self.play.call(_self);
|
||||
});
|
||||
this.pauseButton.addEventListener('click', function () {
|
||||
_self.pause.call(_self);
|
||||
});
|
||||
|
||||
this.playedBar = this.option.element.getElementsByClassName('aplayer-played')[0];
|
||||
this.loadedBar = this.option.element.getElementsByClassName('aplayer-loaded')[0];
|
||||
if (this.option.autoplay) {
|
||||
this.play();
|
||||
}
|
||||
};
|
||||
|
||||
APlayer.prototype.play = function () {
|
||||
this.playButton.classList.add('aplayer-hide');
|
||||
this.pauseButton.classList.remove('aplayer-hide');
|
||||
this.audio.play();
|
||||
var _self = this;
|
||||
this.playedTime = setInterval(function () {
|
||||
_self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration);
|
||||
_self.option.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
APlayer.prototype.pause = function () {
|
||||
this.pauseButton.classList.add('aplayer-hide');
|
||||
this.playButton.classList.remove('aplayer-hide');
|
||||
this.audio.pause();
|
||||
clearInterval(this.playedTime);
|
||||
};
|
||||
|
||||
APlayer.prototype.updateBar = function (type, percentage) {
|
||||
this[type + 'Bar'].style.width = percentage * 100 + '%';
|
||||
};
|
||||
|
||||
APlayer.prototype.secondToTime = function (second) {
|
||||
var add0 = function (num) {
|
||||
return num < 10 ? '0' + num : '' + num;
|
||||
};
|
||||
var min = parseInt(second / 60);
|
||||
var sec = parseInt(second - min * 60);
|
||||
return add0(min) + ':' + add0(sec);
|
||||
};
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
# APlayer
|
||||
|
||||
[](https://www.npmjs.com/package/aplayer)
|
||||
[](https://www.npmjs.com/package/aplayer)
|
||||
[](https://www.npmjs.com/package/aplayer)
|
||||
|
||||
Wow, such a beautiful html5 music player
|
||||
|
||||
## Introduction
|
||||
|
||||
[Demo(暂无)](https://www.anotherhome.net/file/APlayer)
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
npm install aplayer
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
The following HTML structure is used for APlayer:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="APlayer.css">
|
||||
<!-- ... -->
|
||||
<div id="player1" class="aplayer"></div>
|
||||
<!-- ... -->
|
||||
<script src="APlayer.js"></script>
|
||||
```
|
||||
|
||||
And this is how the jRating is initialized:
|
||||
|
||||
```
|
||||
var ap = new APlayer({
|
||||
element: document.getElementById('player1'),
|
||||
autoplay: true,
|
||||
height: '66px',
|
||||
width: '100%',
|
||||
music: {
|
||||
title: 'Preparation',
|
||||
author: 'Hans Zimmer/Richard Harvey',
|
||||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
|
||||
pic: 'Preparation.jpg'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
The following options are available:
|
||||
|
||||
```
|
||||
{
|
||||
element: document.getElementById('player1'),
|
||||
autoplay: true,
|
||||
height: '66px',
|
||||
width: '100%',
|
||||
music: {
|
||||
title: 'Preparation',
|
||||
author: 'Hans Zimmer/Richard Harvey',
|
||||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
|
||||
pic: 'Preparation.jpg'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
API
|
||||
|
||||
+ `ap.play()`
|
||||
+ `ap.pause()`
|
||||
|
||||
## Todo
|
||||
|
||||
- [ ] 播放进度拖拽控制
|
||||
- [ ] 音量控制
|
||||
- [ ] 分享到微博
|
||||
|
||||
|
||||
## LICENSE
|
||||
|
||||
(MIT License)
|
||||
|
||||
Copyright (c) DIYgod
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AnotherPlayer Demo</title>
|
||||
<link rel="stylesheet" href="../APlayer.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="player1" class="aplayer"></div>
|
||||
<script src="../APlayer.js"></script>
|
||||
<script>
|
||||
var ap = new APlayer({
|
||||
element: document.getElementById('player1'),
|
||||
autoplay: true,
|
||||
height: '66px',
|
||||
width: '100%',
|
||||
music: {
|
||||
title: 'Preparation',
|
||||
author: 'Hans Zimmer/Richard Harvey',
|
||||
url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
|
||||
pic: 'Preparation.jpg'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
|
@ -0,0 +1,21 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="volume-off" unicode="" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z" horiz-adv-x="428.6" />
|
||||
<glyph glyph-name="volume-down" unicode="" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z" horiz-adv-x="642.9" />
|
||||
<glyph glyph-name="volume-up" unicode="" d="m429 654v-608q0-14-11-25t-25-10-25 10l-186 186h-146q-15 0-25 11t-11 25v214q0 15 11 25t25 11h146l186 186q10 10 25 10t25-10 11-25z m214-304q0-42-24-79t-63-52q-5-3-14-3-14 0-25 10t-10 26q0 12 6 20t17 14 19 12 16 20 6 32-6 32-16 20-19 12-17 14-6 20q0 15 10 26t25 10q9 0 14-3 39-15 63-52t24-79z m143 0q0-85-48-158t-125-105q-8-3-14-3-15 0-26 11t-10 25q0 22 21 33 32 16 43 25 41 30 64 75t23 97-23 97-64 75q-11 9-43 25-21 11-21 33 0 14 10 25t25 11q7 0 15-3 78-33 125-105t48-158z m143 0q0-128-71-236t-189-158q-7-3-14-3-15 0-26 11t-10 25q0 20 22 33 4 2 12 6t13 6q25 14 45 28 69 51 108 127t38 161-38 161-108 127q-20 14-45 28-4 3-13 6t-12 6q-22 13-22 33 0 14 10 25t26 11q7 0 14-3 118-51 189-158t71-236z" horiz-adv-x="928.6" />
|
||||
<glyph glyph-name="weibo" unicode="" d="m377 134q11 18 6 38t-25 28q-19 8-41 0t-33-25q-13-19-8-38t24-29 42-1 35 27z m52 67q5 7 2 15t-10 10q-7 3-16 0t-12-10q-9-18 8-26 8-2 16 1t12 10z m97-60q-25-57-88-83t-125-7q-60 19-82 71t3 104q27 52 85 78t117 10q62-16 89-66t1-107z m174 90q-5 53-49 94t-117 61-153 12q-124-13-206-79t-74-148q5-53 50-94t116-61 153-12q125 13 206 79t74 148z m172-3q0-38-20-77t-61-77-94-65-126-47-151-17-154 19-134 51-96 85-36 111q0 64 39 137t110 144q94 94 191 131t137-3q36-36 11-117-2-8 0-11t5-4 8 0 8 2l3 1q78 33 138 33t85-34q25-35 0-99-1-8-3-11t3-7 7-5 9-3q32-10 58-26t44-46 19-65z m-41 349q23-27 30-61t-3-66q-5-12-17-19t-25-2q-12 5-19 17t-2 25q11 35-13 61t-60 20q-13-3-25 4t-14 21q-3 14 5 25t20 14q34 7 67-3t56-37z m101 91q48-54 63-125t-8-134q-5-16-19-23t-29-2-22 19-3 29q16 46 6 96t-45 88q-35 39-83 53t-96 5q-16-3-29 6t-17 24 5 29 25 16q68 14 136-6t116-75z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="play" unicode="" d="m486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
|
||||
<glyph glyph-name="pause" unicode="" d="m440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
|
||||
<glyph glyph-name="to-start" unicode="" d="m174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
|
||||
<glyph glyph-name="to-end" unicode="" d="m412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
|
||||
<glyph glyph-name="list" unicode="" d="m100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
|
||||
<glyph glyph-name="menu" unicode="" d="m650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "aplayer",
|
||||
"version": "1.0.0",
|
||||
"description": "Wow, such a beautiful html5 music player",
|
||||
"main": "APlayer.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/DIYgod/APlayer.git"
|
||||
},
|
||||
"keywords": [
|
||||
"player",
|
||||
"music",
|
||||
"html5"
|
||||
],
|
||||
"author": "DIYgod",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/DIYgod/APlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/DIYgod/APlayer#readme"
|
||||
}
|
||||
Loading…
Reference in New Issue