Q&A
確認したいことが何点かあります。
・表示されているエラーを確認したのはiPhone、パソコンのどちらですか？
・エラーに行数は出ていませんでしたか？
・再生しようとする音楽ファイルの形式は何でしょうか？
実現したいこと
Spotifyのような曲のプレイリストページを作っており、その中の
「曲検索ページ」がうまく作動しません。PC版はうまくいきますがiPhoneで読み込むと作動しません。これを作動するようにしたいです。
発生している問題・分からないこと
具体的には、「曲検索ページ」から検索した曲をクリックした後、「プレイリストページ」に遷移し、その曲がそのまま自動再生される設定なのです。しかし、その設定がPC版では作動しますがiphoneで読み込むと、「曲検索ページ」から検索した曲をクリックした後「プレイリストページ」に遷移はするものの、曲が自動で再生されません。
コンソールタブで、エラーメッセージは一つでていますが、
それが原因なのかは解明できていない状況です。
全体のサイトのページ構造は、
・home（ホーム）
・contact（コンタクト）
・playlist（プレイリスト）
・producer information（制作者情報）
・song search（曲検索)
の5頁です。
何卒宜しくお願い致します。
エラーメッセージ
error
1エラーは一つでてます。 2 3【内容】 4Content Security Policy of your site blocks the use of 'eval' in JavaScript` 5The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site. 6 7To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings. 8 9If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive. 10 11⚠️ Allowing string evaluation comes at the risk of inline script injection. 12 131 directive 14Source location Directive Status 15script-src blocked 16
該当のソースコード
Javascript・jQuery
1 2//home 3 4 5var hamburger = $('.hamburger-menu'); 6// OPEN/CLOSEボタンをクリックしたら 7$('.hamburger-button').on('click', function () { 8 // .hamburgerの表示・非表示を繰り返す 9 hamburger.toggleClass('hamburger-menu-active'); 10}); 11// 画面幅のサイズが変わったら 12$(window).on('resize', function () { 13 // ハンバーガーメニューを閉じる 14 hamburger.removeClass('hamburger-menu-active'); 15}); 16 17function playAudio(trackNumber) { 18 const audio1 = document.querySelector(".my-audio1"); 19 const audio2 = document.querySelector(".my-audio2"); 20 const audio3 = document.querySelector(".my-audio3"); 21 22 let audio; 23 24 if (trackNumber === 1) { 25 audio = audio1; 26 } else if (trackNumber === 2) { 27 audio = audio2; 28 } else if (trackNumber === 3) { 29 audio = audio3; 30 } 31 32 if (audio.paused) { 33 audio.play(); 34 } else { 35 audio.pause(); 36 } 37} 38 39//playlist 40$(document).ready(function() { 41const urlParams = new URLSearchParams(window.location.search); 42const song = urlParams.get('song'); 43 44$('.audio-player').each(function() { 45if ($(this).data('song') === song) { 46$(this)[0].play(); 47} 48}); 49}); 50 51 52//songsearch 53 54$(document).ready(function() { 55$('.search-box').on('input', function() { 56const searchTerm = $(this).val().toLowerCase(); 57 58$('.song-item').each(function() { 59const songName = $(this).text().toLowerCase(); 60if (songName.includes(searchTerm)) { 61$(this).show(); 62} else { 63$(this).hide(); 64} 65}); 66}); 67 68$('.song-item').on('click', function() { 69const song = $(this).data('song'); 70window.location.href = '（HPのURL：個人名が入っている為伏せてます。）?song=' + song; 71}); 72}); 73 74
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
HTMLやCSSに原因があるのではないかとチェッカーを使用し、すべてのエラーを解決しましたが、やはりこの問題の解決には至らなかったです。
補足
特になし
ご回答誠にありがとうございます。
・表示されているエラーを確認したのはiPhone、パソコンのどちらですか？
パソコンです。
作動しなかったのは、iphoneです。
・エラーに行数は出ていませんでしたか？
行数は確認していたところ出ておりませんでした。
出ていたのは、エラーメッセージに張り付けている文言のみです。
・再生しようとする音楽ファイルの形式は何でしょうか？
mp3ファイルです。
このコードでこのCSPエラーが出ることは考えられません（問題になるevalや文字列形式でのsetTimeoutなどが見当たらないです）。
ここに提示されていないコードに問題がある、もしくはブラウザ拡張などコードと無関係な箇所でのエラーが出ている、ということが考えられます。
なるほど！！ご回答ありがとうございましたm(__)m
回答1件
0
自動再生の制限にひっかかっている可能性があります。Chromeだと「頻繁にメディア再生を行っているサイト」では自動再生を許しているようです。Safariだと設定で許可することができるようです。
投稿2025/10/20 23:58
編集2025/10/20 23:59
総合スコア22019
なるほど・・・そこが再生されなかったので、その可能性はありますよね・・・
ありがとうございます！紹介して頂いたサイトで確認してみます
このエラーって解消しなくてもいいんですかね、、、
あなたの回答
tips
プレビュー
