js实现控制音乐播放

用js实现控制音乐播放其实很简单，但是第一次去做可能会遇到一点点小问题。

比如说我自己，第一次想实现一个播放器效果，然后在网上搜寻半天照着自己的理解写下如下代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             var mp3 = document.getElementById("music");
             function start() {
                 mp3.play();
             }
 ​
             function stop() {
                 mp3.pause();
             }
         </script>
     </head>
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

我自己感觉是没有任何问题的，然而事情总是超乎我的意料之外，却又在情理之中。可能是因为js学的太浅了，对js的认知度太低，可以说几乎不懂吧。

这时候Ctrl+S保存，然后Ctrl+R打开浏览器一运行，欸嘿，没反应！然后又打开控制台，看到几行红色，说是什么什么是错误。如图：

咱也看不懂，于是乎就复制到浏览器去搜一下。

搜到的结果也是五花八门，并没有我需要的。

然后又自己思考一番。

先在方法外用console.log(mp3);输出这个变量。

再次打开浏览器按下F12显示null，感觉应该也没问题，毕竟是mp3音频文件。

然后又在方法内用console.log(mp3);输出这个变量，结果在浏览器控制台里面什么也没有显示，这时候就是问题所在了。

可能是变量范围的问题吧！咱也不懂！

于是乎又打开浏览器搜索一番，似懂非懂，大致意思就是说：方法内获取不到方法外的变量，方法内需要调用的变量最好就在方法内写。

但是我印象里好像又有全局变量这种东西，害，咱也不懂！当个规律记下吧！

最后实现效果的代码如下：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <title></title>
         <script type="text/javascript">
             function start() {
                 var mp3 = document.getElementById("music");
                 mp3.play();
                 console.log(mp3);//null
             }
             function stop() {
                 var mp3 = document.getElementById("music");
                 mp3.pause();
                 console.log(mp3);//null
             }
         </script>
     </head>
 ​
     <body>
         <video id="music" controls="controls" src="刚好遇见你.mp3">
 ​
         </video>
         <input type="button" id="" value="开始" onclick="start()" />
         <input type="button" id="" value="停止" onclick="stop()" />
     </body>
 </html>

js实现控制音乐播放的更多相关文章

  1. Android中通过耳机按键控制音乐播放的实现

    今天在研究Android中实现Android 4.2.2源码中的Music应用的源码,关于通过耳机按键控制音乐播放的实现,有点好奇,就仔细分析了一下源码, 主要由 MediaButtonIntentR ...

  2. [MAUI 项目实战] 手势控制音乐播放器（一）： 概述与架构

    这是一篇系列博文.请关注我,学习更多.NET MAUI开发知识! [MAUI 项目实战] 手势控制音乐播放器(一): 概述与架构 [MAUI 项目实战] 手势控制音乐播放器(二): 手势交互 [MAU ...

  3. [MAUI 项目实战] 手势控制音乐播放器（四）：圆形进度条

    @ 目录 关于图形绘制 创建自定义控件 使用控件 创建专辑封面 项目地址 我们将绘制一个圆形的音乐播放控件,它包含一个圆形的进度条.专辑页面和播放按钮. 关于图形绘制 使用MAUI的绘制功能,需要Mi ...

  4. html5 js控制音乐播放

      <!DOCTYPE HTML><html><head><meta charset="UTF-8"><script lang ...

  5. [MAUI 项目实战] 手势控制音乐播放器（二）： 手势交互

    @ 目录 原理 交互实现 容器控件 手势开始 手势运行 手势结束 使用控件 拖拽物 创建pit集合 项目地址 原理 定义一个拖拽物,和它拖拽的目标,拖拽物可以理解为一个平底锅(pan),拖拽目标是一个 ...

  6. [MAUI 项目实战] 手势控制音乐播放器（三）： 动画

    @ 目录 吸附动画 确定位置 平移动画 回弹动画 使用自定义缓动函数 多重动画 点击动画 项目地址 上一章节我们创建了手势容器控件PanContainer,它对拖拽物进行包装并响应了平移手势和点击手势 ...

  7. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  8. 原生JS实现音乐播放器！

      前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的 ...

  9. JS实现音乐播放器

    JS实现音乐播放器  前  言            最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播 ...

  10. 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件

    图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx ...

随机推荐

  1. 【AJAX】Asynchronous JavaScript And XML （非同步的JS & XML）

    什么是AJAX? 按照使用的感觉来看 说到底就是一个可以不刷新网页就能发送POST & GET请求的技术 AJAX 即"Asynchronous Javascript And XML ...

  2. 【转载】科研写作入门 —— 聊聊Science Research Writing for non-native Speakers of English这本书

    原地址: https://zhuanlan.zhihu.com/p/623882027 平行侠: 今天我们聊一聊Science Research Writing for non-native Spea ...

  3. Attempting to use uninitialized value beta2_power -------TensorFlow报错

    版本: Python=3.7 TensorFlow=1.14 具体代码: init=[tf.global_variables_initializer(), tf.local_variables_ini ...

  4. 支持NVIDIA GPU —— 如何运行docker环境下的Jax环境

    项目地址: https://github.com/NVIDIA/JAX-Toolbox 具体的安装命令: 地址: https://github.com/NVIDIA/JAX-Toolbox/pkgs/ ...

  5. 用户案例 | 蜀海供应链基于 Apache DolphinScheduler 的数据表血缘探索与跨大版本升级经验

    导读 蜀海供应链是集销售.研发.采购.生产.品保.仓储.运输.信息.金融为一体的餐饮供应链服务企业.2021年初,蜀海信息技术中心大数据技术研发团队开始测试用DolphinScheduler作为数据中 ...

  6. Keil uVision5软件破解方法

    1.正常下载软件 2.右键"管理员方式运行"软件 3.如下图"File"->"License..." 4.复制CID,管理员方式打开破 ...

  7. bazel 简介（一）—— 基础概念与原理

    0x01 背景 bazel目前已广泛用于云计算领域的开源软件的构建如k8s.kubevirt等,本文以一个新手的角度分享下bazel的基础知识,其存在的价值.对比下,它与其他已经存在的构建系统的差别, ...

  8. 在 macOS 上安装 fish

    安装 fish brew install zsh 将默认 shell 切换为 fish 由于 Homebrew 安装的 fish 不在标准 shell 列表 /etc/shell 里,因此要先将 fi ...

  9. Cannot add task 'wrapper' as a task with that name already exists.

    写gradle项目的运行模板脚本 直接执行gradle clean build会报错 将原本的: task wrapper(type: Wrapper) { gradleVersion = '4.10 ...

  10. Spring框架之IOC介绍

    Spring之IOC 简介 首先,官网中有这样一句话:Spring Framework implementation of the Inversion of Control (IoC) princip ...