1. 程式人生 > >移動端自動播放音訊

移動端自動播放音訊

1.引入js檔案:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.現在微信官方已經推出了微信JS-SDK;

var bg_music= document.getElementById("bg_music");
var audio_btn= document.getElementById("audio_btn");
// 通過config介面注入許可權驗證配置後, 在 ready 中 play 一下 audio
function autoPlayAudio1() {
    wx.config({
        // 配置資訊, 即使不正確也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: []
    });
    wx.ready(function() {
        bg_music.play();
    });
}
autoPlayAudio1(); 
//音樂暫停播放
audio_btn.onclick=function(){	
    if(bg_music!==null){
        //檢測播放是否已暫停。bg_music.paused 在播放器播放時返回false.
	if(!bg_music.paused){
	    audio_btn.className="";
	    bg_music.pause();//暫停
	}
	else{
	    audio_btn.className='rotate';
	    bg_music.play();//播放
	}
    }	
}



相關推薦

移動自動播放音訊

1.引入js檔案:<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>2.現在微信官方已經推出了微信JS-SDK;var bg_music= document.get

移動 .m3u8格式音訊播放

音訊流播放: 音訊不應該放audio標籤嗎?  因為audio沒 video 標籤的功能 html: <video id="video" width="0" height="0" src="" x5-playsinline="true" playsinline="true

HTML5和HLS協議兩種技術完美結合解決移動網頁播放問題

html5 hls、網頁直播 什麽是HTML5 我們需要先了解一下HTML是什麽。HTML的英文全稱為Hyper Text Markup Language,即超文本標記語言。HTML5是HTML的一個新版本。HTML 不是一種編程語言,而是一種標記語言 (markup language)。HTML5

js判斷是否是移動自動跳轉到wap頁面代碼

lct regex windows port ams spice hone ron per <script type="text/javascript"> function is_mobile(){ var

專案部署之nginx實現PC移動自動跳轉

假設PC端域名為 www.abc.com     移動端域名為m.abc.com PC端nginx配置檔案server中加入如下程式碼: if ($http_host !~ "^www.abc.com$") { rewrite ^(.*) http://ww

移動自動閱讀

<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.

移動自動將px轉化成rem

$browser-default-font-size: 37.5px !default; //變數的值可以根據自己需求定義 @function pxTorem($px) { //$px為需要轉換

Unity移動視訊播放(AVPro Video外掛)

這是一款非常好用的移動端視訊播放器外掛,支援Android和IOS,除了支援普通視屏的播放外,同時還支援360全景視訊的播放 下面就具體看看這款移動端視訊播放外掛具體如何使用 下面這種方式將視訊應用到Cube或其它物件上,

實現input移動自動獲取焦點以及數字鍵盤搜尋功能

最近專案中需要做一個搜尋功能,其中就有自動獲取焦點以及數字鍵盤快捷搜尋,下面就跟大家分享一下我的實現方法:首先跳轉到搜尋頁面input自動獲取焦點,按常規寫法就是加個autofocus或者頁面載入完成後立即給input加個focus()方法,但是這樣進入頁面的時候焦點會自動消

IOS自動播放音訊/視訊

ios 為了節省使用者流量,對於 audio 和 video標籤的 preload 和 autopaly 標籤會自動攔截,除非使用者手動點選互動才會執行 。 對於背景音樂,又必須載入的時候就要執行,解決方法:(不過注意只能在微信瀏覽器裡面開啟) document

移動語音播放以及語音條拖動的實現

移動端語音播放,包含了語音播放動態小喇叭,語音條,時間長度,支援移動端觸動拖動,不支援PC拖動。 類似於微信公眾號裡面的語音播放,效果如下: 進入頁面: 播放時: 頁面程式碼: <!DOCTYPE html> <html> <head&g

蘋果IOS微信瀏覽器下自動播放音訊問題+jquery click點選閃屏的問題

蘋果IOS微信瀏覽器下自動播放音訊問題 因為ios下微信的瀏覽器是不允許音訊自動播放的,所以投機取巧尋找解決辦法。在此做一下筆記,呼叫一下就好了。 function audioAutoPlay(id){ var audio = document.getElemen

video.js 移動視訊播放器外掛心得

  專案開發遇到視訊播放,考慮到不同移動端需要統一風格,所以選擇用視訊播放外掛。看了試了好多外掛,發現video.js用量最多(必有其好處),用法也很便捷。video.js jquery外掛庫,可直接下載不需要積分;api也有;    但是在移動端的相容不是很好。    問題

手機自動播放網頁背景音樂程式碼

特別宣告:在頁面標籤中必須使用<audio>標籤方有效。 function toggleSound() { var music = document.getElementById("vd");//獲取ID  console.log(music);if (musi

krpano全景之解決微信內建瀏覽器不能自動播放音訊的問題

上接前幾章krpano全景學習之路,開發過程中的思路是安裝網上看到的成功的案例進行開發的,該有的熱點啊、背景音樂啊、陀螺儀啊等等之類的,該有的全部都要背上。前面幾個問題倒是不大,背景音樂這卡住了。相信

視訊video標籤在移動播放總結

昨天新上線了一個關於騰訊18週年嘉年華的html5,這個html5是有5段不同的視訊組成,中間使用各種手勢進行串聯,歡迎大家訪問。眾所周知,在移動端的視訊和音訊都是需要使用者手動點選開啟的,而使用autoplay或在js裡寫play()是沒有任何作用的。還有幾個常見的問題這裡

移動音訊自動播放的方法(js)

因為一些安全限制,移動端上面的音訊無法像在PC上一樣執行自動播放程式碼。 解決方法是給移動端增加一個互動(觸屏)事件。 audio.addEventListener("canplaythrough", function({ //音訊可流暢播放時,播

html5 -audio-移動如何自動播放

sta bsp 進行 tro roi 媒體 add 放音 頁面 最近在做一些活動類頁面或者類似於易企秀類型的輕應用經常遇到關於audio標簽的應用,對於audio相關的常用知識點以及一些相關的問題如下:    <audio id="audios" src="xxxx

移動Web音樂無法自動播放的問題

關於移動端Web音樂自動播放的問題,可以分為三種: 支援audio的autoplay,大部分安卓機子的自帶瀏覽器和微信,大部分的IOS微信(無需特殊解決) 不支援audio的autoplay,部分的IOS微信 (解決ios下的微信開啟的頁面背景音樂無法自動播放) 不支

微信之ios音訊、視訊自動播放

ios 微信瀏覽器 多媒體自動播放 關於微信APIJS 有效的 微信多媒體播放程式碼為 關於微信APIJS weixinJSBridgeready這個事件,我注入在js程式碼庫中,發現一個問題 監聽這個事件,函式是不會執