公众号svg点击切换图片播放音乐功能

张_淮

于 2024-08-29 15:30:35 发布

阅读量347

点赞数 3

分类专栏： svg 公众号 svg切换图片播放音乐文章标签： html5 微信公众平台

本文链接：https://blog.csdn.net/qq_43693823/article/details/141679706

版权

svg 同时被 3 个专栏收录

2 篇文章

订阅专栏

公众号

2 篇文章

订阅专栏

svg切换图片播放音乐

2 篇文章

订阅专栏

公众号svg点击切换图片播放音乐功能
1公众号导入音频
在这里插入图片描述
2使用壹伴插件把公众号音频组件复制到代码替换

在这里插入图片描述
3替换下面 mp-common-mpaudio 标签并粘贴公众号后台预览

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon">
    <title>svg</title>
    <style>

    </style>
</head>

<body>
    <section 
        style="-webkit-touch-callout:none;user-select:text;overflow: hidden;text-align: center;line-height: 0;margin-bottom: 0px;">
        <section style="overflow: hidden;text-align: center;line-height: 0;margin-top: -1px;" 
            label="切换图片_播放音频">
            <section style="text-align: center;height: 0;line-height: 0;width: 100%;margin: 0px auto;"
                 label="切换图片_播放音频"><svg
                    style="background-image: url(http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024); background-repeat: no-repeat; display: block; background-size: 100%;"
                    version="1.1" viewBox="0 0 1000 611" x="0px" y="0px"
                    data-lazy-bgimg="http://gips3.baidu.com/it/u=3419425165,837936650&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024"
                    class="" data-fail="0"></svg></section>
            <section style="text-align: center;height: 0;line-height: 0;width: 100%;margin: 0px auto;overflow: visible;"
                 label="切换图片_播放音频">
                <section style="display: block;line-height: 0;transform: rotateZ(90deg);opacity: 0;">
                    <section style="transform:scale(100) translate(-37.5vw,-8.5vw);">
                        <section>
                            <mp-common-mpaudio src="" author=""
                                cover=""
                                isaac2="" low_size="" source_size="" high_size="" name="bg" play_length="02:39"
                                duration="159" show-listen-later="1" err_tips="" data-trans_state="1"
                                data-verify_state="0" data-topic_link="" data-topic_id="" data-topic_name=""
                                voice_encode_fileid=" class="mp_common_widget">
                            </mp-common-mpaudio>
                        </section>
                    </section>
                </section>
            </section>
            <section style="text-align: center;line-height: 0;width: 100%;pointer-events: none;transform: scale(1);"
                 label="切换图片_播放音频"><svg
                    style="display: block;line-height: 0;pointer-events: none;transform: scale(1);"
                    viewBox="0 0 1000 611">
                    <g>
                        <animateTransform attributeName="transform" type="translate"
                            values="0 0; 0 0; 500000000 500000000; 500000000 500000000" begin="touchstart+0.8s"
                            dur="1000s" keyTimes="0; 0.0005; 0.0005; 1"></animateTransform>
                        <animateTransform attributeName="transform" type="translate" values="0 0; 0 0; 0 0"
                            begin="touchmove+0.8s" dur="1000s" keyTimes="0; 0.0005; 1"></animateTransform>
                        <animate attributeName="opacity" fill="freeze" values="1; 0" dur="0.5s" begin="touchstart+0.3s">
                        </animate>
                        <animate attributeName="opacity" fill="freeze" values="1; 1" dur="0.5s" begin="touchmove+0.3s">
                        </animate>
                        <foreignObject x="0" y="0" width="100%" height="100%"><svg
                                style="background-image: url(http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960); background-repeat: no-repeat; display: block; background-size: 100%;"
                                version="1.1" viewBox="0 0 1000 611" x="0px" y="0px"
                                data-lazy-bgimg="http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
                                class="" data-fail="0"></svg></foreignObject>
                        <rect x="0" y="0" width="100%" height="100%" style="pointer-events: visiblePainted;opacity:0;"
                           >
                            <animate attributeName="width" fill="freeze" values="100%;0;0" keyTimes="0;0.0001;1"
                                dur="1000s" begin="touchstart" additive="replace"></animate>
                            <animate attributeName="width" fill="freeze" restart="always" calcMode="spline"
                                begin="touchmove" dur="1000s" values="100%; 100%" keySplines="0.42 0 0.58 1.0"
                                additive="replace"></animate>
                            <set attributeName="visibility" from="visible" to="hidden" begin="touchstart"
                                dur="0.00001s"></set>
                            <set attributeName="visibility" from="hidden" to="visible" begin="touchmove"></set>
                        </rect>
                    </g>
                </svg></section>
        </section>
    </section>
</body>

</html>```