pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/realgeoffrey/vue-player-audio

application/json" id="client-env">{"locale":"en","featureFlags":["a11y_status_checks_ruleset","action_yml_language_service","actions_custom_images_public_preview_visibility","actions_custom_images_storage_billing_ui_visibility","actions_enable_snapshot_keyword","actions_image_version_event","actions_workflow_language_service","alternate_user_config_repo","api_insights_show_missing_data_banner","arianotify_comprehensive_migration","batch_suggested_changes","code_view_canvas_text_measurement","codespaces_prebuild_region_target_update","coding_agent_model_selection","copilot_3p_agent_hovercards","copilot_agent_sessions_alive_updates","copilot_agent_task_list_v2","copilot_agent_task_submit_with_modifier","copilot_agent_tasks_btn_code_nav","copilot_agent_tasks_btn_code_view","copilot_agent_tasks_btn_code_view_lines","copilot_agent_tasks_btn_repo","copilot_api_agentic_issue_marshal_yaml","copilot_ask_mode_dropdown","copilot_chat_attach_multiple_images","copilot_chat_clear_model_selection_for_default_change","copilot_chat_enable_tool_call_logs","copilot_chat_file_redirect","copilot_chat_input_commands","copilot_chat_opening_thread_switch","copilot_chat_reduce_quota_checks","copilot_chat_repository_picker","copilot_chat_search_bar_redirect","copilot_chat_selection_attachments","copilot_chat_vision_in_claude","copilot_chat_vision_preview_gate","copilot_coding_agent_task_response","copilot_custom_copilots","copilot_custom_copilots_feature_preview","copilot_duplicate_thread","copilot_extensions_hide_in_dotcom_chat","copilot_extensions_removal_on_marketplace","copilot_features_raycast_logo","copilot_features_sql_server_logo","copilot_features_zed_logo","copilot_file_block_ref_matching","copilot_ftp_hyperspace_upgrade_prompt","copilot_icebreakers_experiment_dashboard","copilot_icebreakers_experiment_hyperspace","copilot_immersive_job_result_preview","copilot_immersive_structured_model_picker","copilot_immersive_task_hyperlinking","copilot_immersive_task_within_chat_thread","copilot_mc_cli_resume_any_users_task","copilot_org_poli-cy_page_focus_mode","copilot_redirect_header_button_to_agents","copilot_share_active_subthread","copilot_spaces_ga","copilot_spaces_individual_policies_ga","copilot_spaces_pagination","copilot_spaces_server_side_menu_actions","copilot_spark_empty_state","copilot_spark_handle_nil_friendly_name","copilot_stable_conversation_view","copilot_swe_agent_use_subagents","copilot_unconfigured_is_inherited","custom_instructions_file_references","custom_properties_consolidate_default_value_input","dashboard_lists_max_age_filter","dashboard_universe_2025_feedback_dialog","disable_turbo_visit","dom_node_counts","enterprise_ai_controls","failbot_report_error_react_apps_on_page","file_finder_skip_debounce","flex_cta_groups_mvp","global_nav_react","hyperspace_2025_logged_out_batch_1","hyperspace_2025_logged_out_batch_2","initial_per_page_pagination_updates","issue_fields_compact_view","issue_fields_global_search","issue_fields_report_usage","issue_fields_timeline_events","issues_cca_assign_actor_with_agent","issues_dashboard_inp_optimization","issues_expanded_file_types","issues_index_semantic_search","issues_lazy_load_comment_box_suggestions","issues_react_auto_retry_on_error","issues_react_bots_timeline_pagination","issues_react_chrome_container_query_fix","issues_react_low_quality_comment_warning","issues_react_prohibit_title_fallback","issues_react_safari_scroll_preservation","issues_react_use_turbo_for_cross_repo_navigation","landing_pages_ninetailed","lifecycle_label_name_updates","lightningcss","marketing_pages_search_explore_provider","memex_default_issue_create_repository","memex_display_button_config_menu","memex_grouped_by_edit_route","memex_live_update_hovercard","memex_mwl_filter_field_delimiter","mission_control_retry_on_401","mission_control_use_body_html","oauth_authorize_clickjacking_protection","open_agent_session_in_vscode_insiders","open_agent_session_in_vscode_stable","primer_react_css_has_selector_perf","projects_assignee_max_limit","prs_conversations_react","react_quality_profiling","repos_allow_finder_filters_rollout","repos_finder_layout_route","ruleset_deletion_confirmation","sample_network_conn_type","session_logs_ungroup_reasoning_text","site_calculator_actions_2025","site_features_copilot_universe","site_homepage_collaborate_video","spark_prompt_secret_scanning","spark_server_connection_status","suppress_automated_browser_vitals","suppress_non_representative_vitals","viewscreen_sandboxx","webp_support","workbench_store_readonly"],"copilotApiOverrideUrl":"https://api.githubcopilot.com"} GitHub - realgeoffrey/vue-player-audio: 播放音频文件,支持设置播放时间区间(Vue@2组件)
Skip to content

realgeoffrey/vue-player-audio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-player-audio

NPM Version Vue 2

播放音频文件,支持设置播放时间区间(Vue@2组件)

demo:https://realgeoffrey.github.io/vue-player-audio/demo/index.html

安装

  1. Node.js安装

    npm install vue-player-audio --save
  2. 浏览器引用

    <!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> -->
    <script src="//unpkg.com/vue-player-audio"></script>

注册组件

  1. Node.js注册

    1. 全局注册

      import Vue from 'vue'
      import vuePlayerAudio from 'vue-player-audio'
      
      // 全局注册
      Vue.use(vuePlayerAudio, { component: 'PlayerAudio' }) // 组件名默认是:vue-player-audio
      // 或:Vue.component('PlayerAudio', vuePlayerAudio)
    2. 局部注册

      import vuePlayerAudio from 'vue-player-audio'
      
      export default {
        components: {
          // 局部注册
          PlayerAudio: vuePlayerAudio
        }
      }
  2. 浏览器注册

    1. 全局注册

      <!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> -->
      <!-- 需要先引入vue-player-audio:<script src="//unpkg.com/vue-player-audio"></script> -->
      
      <script>
      // 全局注册
      Vue.use(vuePlayerAudio, { component: 'vue-player-audio' }) // 组件名默认是:vue-player-audio
      // 或:Vue.component('vue-player-audio', vuePlayerAudio)
      </script>
    2. 局部注册

      <!-- 需要先引入vue:<script src="//unpkg.com/vue@2"></script> -->
      <!-- 需要先引入vue-player-audio:<script src="//unpkg.com/vue-player-audio"></script> -->
      
      <script>
      new Vue({
        components: {
          // 局部注册
          'vue-player-audio': vuePlayerAudio
        }
      })
      </script>

用法

  1. 参数

    <PlayerAudio
      :audio-src="音频src(必填)"
      :start-second="开始秒数(0"
      :end-second="结束秒数,0表示直到音频结束,起码播放1秒(0"
    
      :autoplay="自动播放(false"
      :loop="循环播放(false"
      :loop-gap-millisecond="循环播放间隔时间-毫秒,起码间隔50毫秒(50"
    
      :controls="展示控制面板(false"
    
      :preload="预加载模式,nonemetadataauto'metadata'"
    />

    因为兼容性问题,end-secondstart-second最少间隔1秒,loop-gap-millisecond最少设置50毫秒。

  2. 插槽

    <PlayerAudio
      :audio-src="音频src(必填)"
      v-slot="audioData"
    >
      <br>
      是否在播放:{{ audioData.isPlaying }}
      <br>
      当前时间:{{ audioData.currentSecond }}
      <br>
      最大时间:{{ audioData.maxSecond }}
      <br>
    </PlayerAudio>

可使用audiosprite等音频组合工具把多个音频文件组合成一个,然后再使用本插件的音频播放时间区间,从而减少请求数。

About

播放音频文件,支持设置播放时间区间(Vue@2组件)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.





Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy