<audio id="audio" src="waring.wav" preload="auto" controls loop></audio>

$('#audio').play();

报错原因:play()方法属于DOM对象方法,$('#audio')为jquery对象

解决办法:将jquery对象转换为DOM对象

首先打印jquery对象$('#audio')

两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);�0�2
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。�0�2
如:var audio =$('#audio') ; //jQuery对象�0�2
var au=audio�0�2[0]; //DOM对象�0�2
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象�0�2
如:var audio =$('#audio')�0�2;//jQuery对象�0�2
var au=audio.get(0); //DOM对象�0�2

==============================

-------------------------------------------------

=============================

2down voteaccepted

Example solution based on your question:

var myAudio = $("#song")[0];

var isPlaying = false;

function togglePlay() {
if (isPlaying) {
myAudio.pause();
} else {
myAudio.play();
}
};
myAudio.onplaying = function() {
isPlaying = true;
};
myAudio.onpause = function() {
isPlaying = false;
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id="song" src="https://ia801009.us.archive.org/4/items/BeatlesGreatestHits/02%20With%20a%20Little%20Help%20From%20My%20Friends.mp3"></audio>

<img onclick="togglePlay()" src="https://pmcdeadline2.files.wordpress.com/2014/06/the-beatles-1__140613232022.jpg" width="100%">

audio video 控制播放和停止的更多相关文章

  1. audio 基本功能实现(audio停止播放,audio如何静音,audio音量控制等)

    audio最简单原始的播放.暂停.停止.静音.音量大小控制的功能,注意某些浏览器会有权限无法自动播放噢(video也会如此) <!doctype html> <html> &l ...

  2. js控制html5 audio的暂停、播放、停止

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  3. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

  4. 自定义css样式结合js控制audio做音乐播放器

    最近工作需求需要播放预览一些音乐资源,所以自己写了个控制audio的音乐播放器. 实现的原理主要是通过js调整audio的对象属性及对象方法来进行控制: 1.通过play().pause()来控制音乐 ...

  5. apk支持html video控制 ,是播放状态就暂停,暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...

  6. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  7. 从Chrome源码看audio/video流媒体实现一(转)

    现在绝大多数的网站已经从flash播放器转向了浏览器原生的audio/video播放器,浏览器是如何加载和解析多媒体资源的,这对于web开发者来说是一个黑盒,所以很有必要看一下浏览器是怎么实现的,Ch ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  9. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

随机推荐

  1. Centos7 安装pyquery 等包的简易方法

      单独下载安装模块: sudo mkdir /home/pythonmodule sudo wget https://www.crummy.com/software/BeautifulSoup/bs ...

  2. 进程队列补充-创建进程队列的另一个类JoinableQueue

    JoinableQueue同样通过multiprocessing使用. 创建队列的另外一个类: JoinableQueue([maxsize]):这就像是一个Queue对象,但队列允许项目的使用者通知 ...

  3. BZOJ.5404.party(树链剖分 bitset Hall定理)

    题目链接 只有指向父节点的单向道路,所以c个人肯定在LCA处汇合.那么就成了有c条到LCA的路径,求最大的x,满足能从c条路径中各选出x个数,且它们不同. 先要维护一条路径的数的种类数,可以树剖+每条 ...

  4. 洛谷.3254.圆桌问题(最大流ISAP)

    题目链接 日常水题 还是忍不住吐槽这题奇怪的评价 #include <cstdio> #include <cctype> #include <algorithm> ...

  5. 洛谷.3834.[模板]可持久化线段树(主席树 静态区间第k小)

    题目链接 //离散化后范围1~cnt不要错 #include<cstdio> #include<cctype> #include<algorithm> //#def ...

  6. Python面向对象——多态

    多态的作用 调用不同的子类将会产生不同的行为. 多态是在继承上实现的. 图解多态1 图解多态2 图解多态1代码 class AudioFile: def __init__(self, filename ...

  7. phantomjs + python 打造一个微信机器人

    phantomjs + python 打造一个微信机器人 1.前奏   媳妇公司不能上网,但经常需要在公众号上找一些文章做一些参考,需要的时候就把文章链接分享给我,然后我在浏览器打开网页,一点点复制过 ...

  8. 使用gulp对js、css、img进行合并压缩

    1 概述 最新使用AngularJS框架做单页面项目,其中包括了很多库的和自已写的js.css.img文件,这些文件都不大,但是数量众多,导致web请求文件过多,一次性加载时比较慢.有尝试过使用异步加 ...

  9. 哪个中年IT男不是一边面对危机,一边咬牙硬抗【转】

    来自: 懂懂笔记 对于 2017 年年末那则令人哀伤的消息,相信很多同龄人都会触目伤怀.面对公司的强制性劝退,深圳中兴网信科技有限公司某研发组主管从办公楼上一跃而下,用最决绝的方式结束了宝贵的生命. ...

  10. maven 引入外部jar包的几种方式(转)

    原文链接: maven 引入外部jar包的几种方式 方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud< ...