| 网站首页 | 业界新闻 | 群组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 编程论坛
共有 1686 人关注过本帖
标题:H5 audio 标签问题 求解决
只看楼主 加入收藏
freebirdbo
Rank: 1
等 级:新手上路
帖 子:256
专家分:0
注 册:2005-3-27
  问题点数:0  回复次数:4   
H5 audio 标签问题 求解决
同一个页面有两个音频   ,怎么分别控制播放   感谢
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>音频测试</title>
        <link rel="stylesheet" href="" />
        <style type="text/css">
            .btn-audio{
                margin: 90px auto;
                width: 186px;
                height: 186px;
                background:url(pause.png) no-repeat center bottom;
                background-size:cover;
            }
        </style>
    </head>

    <body>
        <div class="btn-audio"><audio id="mp3Btn"><source src="http://sc1.111ttt.cn/2015/1/10/15/103151428370.mp3" type="audio/mpeg" /></audio></div>


        <div class="btn-audio"><audio id="mp3Btn"><source src="http://mp3.haoduogeq.com/s/2017-12-22/1513909355.mp3" type="audio/mpeg" /></audio></div>



        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+"px";
               
                //播放完毕
                $('#mp3Btn').on('ended', function() {
                    console.log("音频已播放完成");
                    $('.btn-audio').css({'background':'url(pause.png) no-repeat center bottom','background-size':'cover'});
                })
                //播放器控制
                var audio = document.getElementById('mp3Btn');
                audio.volume = .3;
                $('.btn-audio').click(function() {
                    event.stopPropagation();//防止冒泡
                    if(audio.paused){ //如果当前是暂停状态
                        $('.btn-audio').css({'background':'url(play.png) no-repeat center bottom','background-size':'cover'});
                        $('.btn-test').removeAttr('disabled').css('background','#FF296A');
                        audio.play(); //播放
                        return;
                    }else{//当前是播放状态
                        $('.btn-audio').css({'background':'url(pause.png) no-repeat center bottom','background-size':'cover'});
                        audio.pause(); //暂停
                    }
                });
            })
        </script>
    </body>

</html>
2018-01-09 21:20
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
  得分:0 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>音频测试</title>
        <link rel="stylesheet" href="" />
        <style type="text/css">
            .btn-audio{
                margin: 90px auto;
                width: 186px;
                height: 186px;
                background:#f00;
                background-size:cover;
            }
        </style>
    </head>

    <body>
        <div class="btn-audio"><audio id="mp3Btn"><source src="http://sc1.111ttt.cn/2015/1/10/15/103151428370.mp3" type="audio/mpeg" /></audio></div>


        <div class="btn-audio"><audio id="mp3Btn"><source src="http://mp3.haoduogeq.com/s/2017-12-22/1513909355.mp3" type="audio/mpeg" /></audio></div>



        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5+"px";
               
                //播放完毕
                $('#mp3Btn').on('ended', function() {
                    console.log("音频已播放完成");
                    $('.btn-audio').css({'background':'url(pause.png) no-repeat center bottom','background-size':'cover'});
                })

                //播放器控制
                var audio = document.getElementById('mp3Btn');

                audio.volume = .3;

                $('.btn-audio').click(function() {
                    event.stopPropagation();//防止冒泡

                    if($(this).find("audio").get(0).paused){ //如果当前是暂停状态
                        $(this).css({'background':'#0f0'});
                        $(this).find("audio").get(0).play(); //播放
                    }else{//当前是播放状态
                        $(this).css({'background':'#f00'});
                        $(this).find("audio").get(0).pause(); //暂停
                    }
                });
            })
        </script>
    </body>

</html>

[此贴子已经被作者于2018-1-11 15:44编辑过]

2018-01-11 15:37
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
  得分:0 
1.
$(this)是拿到當前點擊的jquery對象

$(this).find('audio')是拿到該對象下面的子元素

$(this).find('audio').get(0)  是把jquery對象轉換為dom對象

所以你只要取得點擊對象,然後操作該對象下的audio就可以了
2018-01-11 15:42
cho1
Rank: 2
等 级:论坛游民
帖 子:9
专家分:40
注 册:2018-1-11
  得分:0 
回复 2楼 cho1
如果你覺的對你有幫助,請告訴我讓我知道
2018-01-11 15:46
freebirdbo
Rank: 1
等 级:新手上路
帖 子:256
专家分:0
注 册:2005-3-27
  得分:0 
非常感谢 兄弟的帮助 谢谢谢谢
2018-01-12 10:26







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.026324 second(s), 8 queries.
Copyright©2004-2018, BCCN.NET, All Rights Reserved