IOS中微信搖一搖聲音無法播放解決辦法

阿新 • • 發佈：2019-02-01

在IOS中第一次呼叫play方法播放音訊會被阻止，必須得等使用者有互動動作，比如touchstart，click後才能正常呼叫，所以可以在搖一搖之前提醒使用者點選一下開始遊戲的按鈕或者給使用者一個彈窗，使用者點選的時候播放一個超級短的無聲音檔案，之後替換src，這樣再呼叫play方法就可以了。

程式碼如下如：

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
</head>
<body>

 <button>開始遊戲</button>

  <audio src="https://daoket.github.io/img/load.mp3" id="audio"></audio>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" 
></script>
  <script type="text/javascript">

    $('button').one('touchstart', function () {
        var audio = document.getElementById("audio");
        audio.play();
        audio.setAttribute('src', 'https://daoket.github.io/img/shake.mp3');
        audio.load();
        $(this).text('遊戲進行中' 
);
    })

    /**
     * 移動端搖一搖
     * @params devicemotion 提供裝置加速度資訊
     */
    window.addEventListener('devicemotion', devicemotionHandler, false);

    var x,
        y,
        z,
        last_x,
        last_y,
        last_z,
        last_time = 0,
        SHAKE_SPEED = 4000;
   function devicemotionHandler (evet) {
       var acc = event.accelerationIncludingGravity,
           curTime = new Date().getTime(),
           diffTime = curTime - last_time;

        if (diffTime > 100) {
              last_time = curTime;

              x = acc.x;
              y = acc.y;
              z = acc.z;

              var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
              if (speed > SHAKE_SPEED) {
                document.getElementById("audio").play()
              }

              last_x = x;
              last_y = y;
              last_z = z;
        }
   }
  </script>
</body>
</html>

線上檢視

IOS中微信搖一搖聲音無法播放解決辦法

在IOS中第一次呼叫play方法播放音訊會被阻止，必須得等使用者有互動動作，比如touchstart，click後才能正常呼叫，所以可以在搖一搖之前提醒使用者點選一下開始遊戲的按鈕或者給使用者一個彈窗，使用者點選的時候播放一個超級短的無聲音檔案，之後替換src，

js設定ios中微信瀏覽器的title

說到web前端，瀏覽器差異是不可迴避的問題，這次在專案就遇到下面的問題：微信導航欄的內容是直接拿的專案中title來設定的。但是現在做的專案是一個單頁應用，整個頁面只會在第一次完全重新整理，後面只會

關於微信突然停止WeixinJSBridge的介面暫時解決辦法

今天微信公眾平臺出了個公告然後就停掉了WeixinJSBridge介面，目前研究下來暫時的解決辦法是，在body下加一個div，display:none，然後放一張圖片，圖片的尺寸要大於290x290，然後網頁的標題寫成需要分享時的標題，分享描述是沒辦法了，預設就是頁

【微信支付】調起微信支付，總是顯示-1的解決辦法

如果你檢查過 APPID，檢查過商戶號，檢查過包名，檢查過應用簽名，依然顯示 -1 那麼你可以嘗試我這種方式記住下面這句話 https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_5 商戶伺服器生成支付訂

微信開發關於外部超連結的解決辦法！

今天做了一個微信公眾號的開發，要求點選其中一個選單的時候切換到另一個選單頁面，在第二個選單頁面中有四個div包含的<a>標籤超連結，點選每一個選單選項的時候，彈出的內容是在後臺配置的頁面，配置頁面如下：現在要求：點選其中一個選單列表的時候，跳轉的是第三方的網

關於傳送微信客服訊息報44004錯誤的解決辦法

錯誤如下： {"errcode":44004,"errmsg":"empty content hint: [xCzlfa0209ge25]"} 傳送的程式碼如下： def POST(self): data = web.data() reg

微會動平臺上線發布支持13種3D微信搖一搖活動現場微信互動遊戲產品

微信搖一搖微信互動活動互動微信現場互動微會動當下，會議等市場活動場景上企業利用微信營銷日趨廣泛。統計數據顯示，目前，微信和WeChat的合並月活躍賬戶數達到9.63億，而新興的公眾號平臺擁有1000萬個。微信作為熱門的社交信息平臺，也是移動端的一大入口，正在演變成為一大商業交易平

微會動微信互動3D搖一搖助力沃奧思航海教育產品推介會

微會動微信互動微信搖一搖會議互動 2018年6月11日，由秦皇島國際旅遊港泰盛鴻洲國際遊艇俱樂部與沃奧思營地聯合主辦，楓寶文化（北京）有限公司承辦“‘星’教育，新文旅”，沃奧思航海教育產品推介會在京北京京瑞溫泉國際酒店隆重舉行，200余位各界人士出席參加本次活動。在本次推介會上青少年冠軍

Android .感測器仿微信搖一搖

佈局檔案： <LinearLayout android:background="@drawable/shakehideimg_man2" android:layout_gravity="center" android:orientation="vertical"

H5頁面仿微信搖一搖及音訊(安卓和蘋果)

H5頁面仿微信搖一搖，動作以及音訊的知識點和程式碼，在Android和IOS的相容問題測試環境：微信瀏覽器一、搖一搖： 1.知識點涉及事件DeviceMotionEvent，該事件返回裝置有關於加速度和旋轉的相關資訊。加速度包括X、Y、Z軸 X軸橫穿螢幕，Y軸

仿微信搖一搖實現播放音樂

搖一搖功能是使用手機加速度感測器來判斷是否處於搖一搖狀態,從而進行相應的操作 <1>將音樂檔案放在res/raw下,如果沒有raw,建立一個 <2>佈局檔案 <?xml version="1.0" encoding="ut

微信小程式例項-搖一搖抽獎

概述前面我們講了如何開始微信小程式搭建和一些元件的介紹。微信小元件和微信小程式入門微信小程式目錄為了更好的理解小程式和小程式開發，我們首先來看一下專案的目錄。首先看下根目錄下的app.json的檔案，可以看到在”pages”的數組裡，裡面配置

微信搖一搖技巧之歌曲技巧

大家都知道微信搖一搖為約炮神器，但是大家卻不知道還有約炮的其他技巧大家可以試一試約炮旁邊的歌曲搖一搖，當你不熟悉一首音樂又想知道這首歌曲的名字的時候，不要慌，記住約炮神器旁邊還有一個神器，你選擇歌曲搖一搖，對著你想知道歌曲音樂的試聽開始搖，你會知道這個效果很神奇，真的會出現劉德華冰

安卓高階5 感測器和震動模仿微信搖一搖Ui效果

效果圖: 所用的Ui就三張圖: 案例程式碼: 結構 MainActivity.java package com.example.myapp; import android.content.Intent; import a

ios微信客戶端中聲音無法播放

html中audio標籤<audio src="http://wx.masrbs.com/Addons/HFive/View/default/Public/music/flipsound.mp3" id="Jaudio" class="media-audio" prel

仿微信-介面動畫(3)-搖一搖

1.ShakeListener 監聽器 package cn.buaa.myweixin; import android.content.Context; import android.hardware.Sensor; import android.ha

微信搖一搖公眾號開發

1. 首先查詢公眾號是否存在 https://api.weixin.qq.com/cgi-bin/token? grant_type=client_credential&appid=APPI

前端筆記之微信小程式（四）WebSocket&Socket.io&搖一搖案例&地圖|地理位置

一、WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款開源高效能非同步PHP socket即時通訊框架https://workerman.net HTTP是無連線的：有請求才會有

IOS版微信上看到的模板消息是一片空白

發送模板消息是不是 alt 問題：圖片意思找到微信直接【1】問題：發送模板消息，微信顯示一片空白使用微信公眾號發送模板消息時，安卓上面的微信可以正常顯示消息，如下圖所示但是IOS系統上的微信接收到模板消息為一片空白，如下圖所示發送模板消息的接口返回的結果如下圖

微信掃一掃打開網址彈出遮罩提示用戶在外部瀏覽器中打開

blank class src 無法 webp shu 方案打開圖片顯示在微信裏無法打開下載鏈接，而在瀏覽器中卻可以。通過google 發現，原來是微信屏蔽了內置瀏覽器的下載功能。那麽有沒有解決辦法呢？肯定是有的。解決方案：彈出一個遮罩，提示用戶在瀏覽器中打開進行

IOS中微信搖一搖聲音無法播放解決辦法

相關推薦